MERANCANG DAN MEMBANGUN WEBSITE
7 aturan merancang website
- Just becouse you can doesn’t mean you should.
Adanya teknologi, bukan berarti harus digunakan ketika merancang website. Sering kali teknologi malah menghalangi performa dari website atau mengganggu pengguna sehingga meninggalkan website. Ketika menggunakan teknologi, perancang harus bertanya “Apakah teknologi mampu menambah nilai sebuah website atau ditambahkan sebagai hal yang baru?
- There is almost always an exception
Perancang web harus hati-hati ketika mengesampingkan penggunaan teknologi atau metode
design yang sederhana karena tidak bekerja di website lain.
- Users are the ultimate judges
Pendapat/opini tidak pernah berhenti ketika berada pada proses perancangan/design.
- Crossover experience is something a designer needs to always strive for
Seorang perancang web profesional mengerti akan kebutuhan dari user, tanpa memperhatikan bahwa
perancang secara pribadi percaya estetika dan aspekaspek tehnik dari website harus dirancang.
- Humility is the best approach
Karena ada begitu banyak seluk-beluk Desain Web, dibutuhkan desainer dengan situs yang
lebih menarik, teknologi baru, atau penggunaan teknologi dengan cara yang lebih kreatif.
- It is impossible to please everyone
Seorang desainer seringkali harus mengambil sikap untuk mempertahankan fungsional tertentu dan aspek estetika desain, tidak pernah bertujuan untuk membuat semua pengguna puas karena semua orang punya pendapat.
- Try to stay on top of specifications and standards
Spesifikasi dan standar web akan terus berubah. Perancang web harus memiliki pemahaman dasar
tentang teknik-teknik terbaru, yang akan mempengaruhi hasil kerja dimasa yang akan datang.
3 Filosofi Merancang Web
- Estetika
- Kegunaan
Seberapa cepat dan mudah pengguna mampu menemukan dan memproses informasi ketika sedang
melakukan tugas-tugas yang diperlukan?
- Fungsi
Pemrograman harus mengaktifkan aspek fungsional situs, seperti formulir dan konten database-driven.
Desain web dibagi 3, yaitu:
1. Desain Antar Muka
2. Desain Situs
3. Desain Halaman
Requirement
Ketika membangun sebuah situs, beberapa informasi yang paling penting bagi seorang desainer meliputi:
- Look and feel requirements
Termasuk penempatan konten, bagaimana situs menyampaikan pesanperusahaan, palet warna, dan font serta gambar konsep-konsep yang akan disajikan.
- Bandwidth requirements
Cara situs dirancang menentukan bagaimana besar dari bandwidth yang diperlukan oleh sebuah situs. Dengan memahami bandwidth (download size), desainer dapat menentukan keseimbangan antara grafik dan teks yang akan digunakan.
- Resolution requirements
Sebuah situs dengan resolusi yang tidak benar dapat menghambat kegunaan atau kredibilitas.
- Scalability requirements
Hampir semua situs berada dalam evolusi yang tetap, penting bagi desainer untuk empertimbangkan bagaimana situs bisa expanded atau berubah di masa depan.
- Content requirements
Volume isi situs akan mempengaruhi hampir semua persyaratan lain, termasuk tampilan dan nuansa,
bandwidth, resolusi dan skalabilitas.
Salam,
Selamat datang Di Pandora Code. untuk kali ini saya akan membagikan koding CSS yaitu untuk membuat Pop Up menu. Pop Up menu adalah jenis menu yang tampil pada jendela baru di halaman yang sama. jenis menu seperti ini sangat unik dan menarik bagi pengunjung web.
var popupMode=1;
//--- Common
var isHorizontal=0;
var smColumns=1;
var smOrientation=0;
var smViewType=0;
var dmRTL=0;
var pressedItem=-2;
var itemCursor="default";
var itemTarget="_blank";
var statusString="link";
var blankImage="data-samples/images/blank.gif";
//--- Dimensions
var menuWidth="";
var menuHeight="";
var smWidth="";
var smHeight="";
//--- Positioning
var absolutePos=0;
var posX="0";
var posY="0";
var topDX=0;
var topDY=3;
var DX=-5;
var DY=0;
//--- Font
var fontStyle="normal 10px Arial";
var fontColor=["#000000","#FFFFFF"];
var fontDecoration=["none","none"];
var fontColorDisabled="#AAAAAA";
//--- Appearance
var menuBackColor="#DC9489";
var menuBackImage="";
var menuBackRepeat="repeat";
var menuBorderColor="#C87D7D";
var menuBorderWidth=1;
var menuBorderStyle="solid";
//--- Item Appearance
var itemBackColor=["#E7B3A9","#883737"];
var itemBackImage=["",""];
var itemBorderWidth=0;
var itemBorderColor=["#E4E1DE","#FFFFFF"];
var itemBorderStyle=["solid","solid"];
var itemSpacing=0;
var itemPadding="5px 5px 5px 10px";
var itemAlignTop="left";
var itemAlign="left";
var subMenuAlign="";
//--- Icons
var iconTopWidth=24;
var iconTopHeight=24;
var iconWidth=30;
var iconHeight=15;
var arrowWidth=11;
var arrowHeight=11;
var arrowImageMain=["arrow_sub1.gif","arrow_sub2.gif"];
var arrowImageSub=["arrow_sub1.gif","arrow_sub2.gif"];
//--- Separators
var separatorImage="";
var separatorWidth="100%";
var separatorHeight="3";
var separatorAlignment="left";
var separatorVImage="";
var separatorVWidth="3";
var separatorVHeight="100%";
var separatorPadding="0px";
//--- Floatable Menu
var floatable=0;
var floatIterations=6;
var floatableX=1;
var floatableY=1;
//--- Movable Menu
var movable=0;
var moveWidth=12;
var moveHeight=20;
var moveColor="#AA0000";
var moveImage="";
var moveCursor="default";
var smMovable=0;
var closeBtnW=15;
var closeBtnH=15;
var closeBtn="";
//--- Transitional Effects & Filters
var transparency="85";
var transition=24;
var transOptions="";
var transDuration=400;
var transDuration2=200;
var shadowLen=4;
var shadowColor="#BBBBBB";
var shadowTop=1;
//--- CSS Support (CSS-based Menu)
var cssStyle=0;
var cssSubmenu="";
var cssItem=["",""];
var cssItemText=["",""];
//--- Advanced
var dmObjectsCheck=0;
var saveNavigationPath=1;
var showByClick=0;
var noWrap=1;
var pathPrefix_img="data-samples/images/";
var pathPrefix_link="data-samples/";
var smShowPause=200;
var smHidePause=1000;
var smSmartScroll=1;
var topSmartScroll=0;
var smHideOnClick=1;
var dm_writeAll=0;
//--- AJAX-like Technology
var dmAJAX=0;
var dmAJAXCount=0;
//--- Dynamic Menu
var dynamic=0;
//--- Keystrokes Support
var keystrokes=1;
var dm_focus=1;
var dm_actKey=113;
var menuItems = [
["Home","testlink.htm"],
["Product Info",""],
["|Features","testlink.htm"],
["|Installation",""],
["||Description of Files","testlink.htm"],
["||How To Setup","testlink.htm"],
["|Parameters Info","testlink.htm"],
["|Dynamic Functions","testlink.htm"],
["|Supported Browsers",""],
["||Windows OS",""],
["|||Internet Explorer",""],
["|||Firefox",""],
["|||Mozilla",""],
["|||Opera",""],
["|||Netscape Navigator",""],
["||MAC OS",""],
["|||Firefox",""],
["|||Safari",""],
["|||Internet Explorer",""],
["||Unix/Linux OS",""],
["|||Firefox",""],
["|||Konqueror",""],
["Samples",""],
["|Sample 1","testlink.htm"],
["|Sample 2","testlink.htm"],
["|Sample 3","testlink.htm"],
["|Sample 4","testlink.htm"],
["|Sample 5","testlink.htm"],
["|Sample 6","testlink.htm"],
["Purchase","testlink.htm"],
["Contact Us","testlink.htm"],
];
dm_init();
Salam,
Dalam Mengollah tampilan dan data sering kali kita mendapat kesulitan untuk tampilan halaman dalam menampilkan data. data yang cukup banyak dan panjang apabila ditampilkan sekaligus dalam satu halamat tentu akan terlihat kurang indah. untuk itu bagi yang sudah mengerti pengkodean dengan PHP dan MySQL saya langsung tampilkan Koding dibawah ini, koding ini beisi form dan pagination untuk menampilkan data dari database.
<html>
<head>
<title>Membuat paging</title>
</head>
<body>
<div align="center">
<?php
$tablename="data_diri";
// jumlah data perhalaman
$rowsPerPage = 2;
//nilai pertama
$pageNum = 1;
if(!empty($_GET['page']))
{
$pageNum = $_GET['page'];
}
$offset = ($pageNum - 1) * $rowsPerPage;
// query database
$hasil=mysql_query("select * from nama_table");
$jumlah=mysql_num_rows($hasil);
$query = "SELECT * FROM data_diri ORDER by id asc LIMIT $offset, $rowsPerPage";
$result = mysql_query($query) or die('Error, query failed. ' . mysql_error());
?>
<h2 class="tengah">DATA MAHASISWA</h2>
<b><u><center>Jumlah Data : <? echo $jumlah ?> </center> </u></b>
<table width="700" border="0" cellpadding="3" cellspacing="1" bgcolor="#999999">
<tr bgcolor="#E8FDEC">
<th width="100">No</th>
<th width="149">ID</th>
<th width="348">NAMA</th>
<th width="348">Alamat</th>
<th width="348">Email</th>
<th width="400">Tempat Tugas</th>
<th width="400">Tempat Studi</th>
</tr>
<?php
$no = 0;
while($row = mysql_fetch_array($result))
{ $no++;
?>
<tr bgcolor="#fff">
<td><?php echo $no ?></td>
<td><?php echo $row['id']?></td>
<td><?php echo $row['nama']?></td>
<td><?php echo $row['alamat']?></td>
<td><?php echo $row['email']?></td>
<td><?php echo $row['nama_ptai']?></td>
<td><?php echo $row['nama_pt']?></td>
</tr>
<?php
} //end of while
?>
</table>
<?php
$query = "SELECT COUNT(id) AS numrows FROM nama_table";
$result = mysql_query($query) or die('Error, query failed. ' . mysql_error());
$row = mysql_fetch_array($result, MYSQL_ASSOC);
$numrows = $row['numrows'];
$maxPage = ceil($numrows/$rowsPerPage);
$nextLink = ' ';
if($maxPage >1)
{
$nav .= "<form id=\"FNav\" name=\"FNav\" method=\"get\" action=\"\">";
$nav .= "Halaman : <select name=\"page\" id=\"page\">";
for($page = 1; $page <= $maxPage; $page++)
{
if($pageNum==$page)
{
$nav .= "<option selected>$page</option>";
} else
{
$nav .= "<option>$page</option>";
}
}
$nav .= "</select>";
$nav .= "<input type=\"submit\" name=\"btn\" id=\"btn\" value=\"Go\" />";
$nav .= "</form>";
}
echo '<p>'.$nav.'</p>';
mysql_free_result($result);
?>
</div>
</body>
</html>
