Membangun Star

/* Copyright (c) Mark J. Kilgard, 1994. */

/**
 * (c) Copyright 1993, Silicon Graphics, Inc.
 * ALL RIGHTS RESERVED 
 * Permission to use, copy, modify, and distribute this software for 
 * any purpose and without fee is hereby granted, provided that the above
 * copyright notice appear in all copies and that both the copyright notice
 * and this permission notice appear in supporting documentation, and that 
 * the name of Silicon Graphics, Inc. not be used in advertising
 * or publicity pertaining to distribution of the software without specific,
 * written prior permission. 
 *
 * THE MATERIAL EMBODIED ON THIS SOFTWARE IS PROVIDED TO YOU "AS-IS"
 * AND WITHOUT WARRANTY OF ANY KIND, EXPRESS, IMPLIED OR OTHERWISE,
 * INCLUDING WITHOUT LIMITATION, ANY WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE.  IN NO EVENT SHALL SILICON
 * GRAPHICS, INC.  BE LIABLE TO YOU OR ANYONE ELSE FOR ANY DIRECT,
 * SPECIAL, INCIDENTAL, INDIRECT OR CONSEQUENTIAL DAMAGES OF ANY
 * KIND, OR ANY DAMAGES WHATSOEVER, INCLUDING WITHOUT LIMITATION,
 * LOSS OF PROFIT, LOSS OF USE, SAVINGS OR REVENUE, OR THE CLAIMS OF
 * THIRD PARTIES, WHETHER OR NOT SILICON GRAPHICS, INC.  HAS BEEN
 * ADVISED OF THE POSSIBILITY OF SUCH LOSS, HOWEVER CAUSED AND ON
 * ANY THEORY OF LIABILITY, ARISING OUT OF OR IN CONNECTION WITH THE
 * POSSESSION, USE OR PERFORMANCE OF THIS SOFTWARE.
 * 
 * US Government Users Restricted Rights 
 * Use, duplication, or disclosure by the Government is subject to
 * restrictions set forth in FAR 52.227.19(c)(2) or subparagraph
 * (c)(1)(ii) of the Rights in Technical Data and Computer Software
 * clause at DFARS 252.227-7013 and/or in similar or successor
 * clauses in the FAR or the DOD or NASA FAR Supplement.
 * Unpublished-- rights reserved under the copyright laws of the
 * United States.  Contractor/manufacturer is Silicon Graphics,
 * Inc., 2011 N.  Shoreline Blvd., Mountain View, CA 94039-7311.
 *
 * OpenGL(TM) is a trademark of Silicon Graphics, Inc.
 */

#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include <math.h>
#include <time.h>
#include <GL/glut.h>
                        //pre processor directive
#undef PI               /* Beberapa sistem mendefinisikan ini. */
#define PI 3.141592657  //deklarasi konstanta phi

enum //mode enumerasi mode bintang
{
     NORMAL = 0,
     WEIRD = 1
};

enum 
{
     STREAK = 0,
     CIRCLE = 1
};

#define MAXSTARS 400
#define MAXPOS 10000
#define MAXWARP 10
#define MAXANGLES 6000

typedef struct _starRec //struct bintang
{
        GLint type;                                 //deklarasi tipe type >> integer openGL
        float x[2], y[2], z[2];                     //deklarasi koordinat
        float offsetX, offsetY, offsetR, rotation;  //deklarasi offset sama rotasi
}starRec;

GLenum doubleBuffer;
GLint windW = 300, windH = 300; //deklarasi ukuran size window
GLenum flag = NORMAL; //deklarasi flag awal >> Normal
GLint starCount = MAXSTARS / 2; //set jumlah bintang awal=Maxstar/2
float speed = 1.0; //set kecepatan bintang >>1
GLint nitro = 0; //set nitro tidak aktif
starRec stars[MAXSTARS]; //deklarasi variable stars sebanyak maxstar dengan tipe data struct
float sinTable[MAXANGLES]; //deklarasi kamus sudut dalam sinus

float Sin(float angle) //fungsi sinus
{
      return (sinTable[(GLint) angle]);
}

float Cos(float angle) //fungsi cosinus
{
      return (sinTable[((GLint) angle + (MAXANGLES / 4)) % MAXANGLES]);
}

void NewStar(GLint n, GLint d) //fungsi bintang baru sebanyak n, dengan jarak kemajuan d
{
     if (rand() % 4 == 0) 
     {                          //tipe bintang ditentukan oleh bilangan random
        stars[n].type = CIRCLE; //bila dimodulo 4 == 0, hasilnya circle, kalo ngga
     } else                     //streak
     {                   
        stars[n].type = STREAK;
     }
     
     stars[n].x[0] = (float) (rand() % MAXPOS - MAXPOS / 2); //posisi x awal yg baru
     stars[n].y[0] = (float) (rand() % MAXPOS - MAXPOS / 2); //posisi y awal yg baru
     stars[n].z[0] = (float) (rand() % MAXPOS + d); //posisi z awal yg baru
     
     stars[n].x[1] = stars[n].x[0]; //copy dari x[0] ke x[1]
     stars[n].y[1] = stars[n].y[0]; //copy dari y[0] ke y[1]
     stars[n].z[1] = stars[n].z[0]; //copy dari z[0] ke z[1]
     if (rand() % 4 == 0 && flag == WEIRD) 
     {                                                        //kalau tipenya circle dan modenya
        stars[n].offsetX = (float) (rand() % 100   - 100 / 2);  //weird, maka ditambahkan offset
        stars[n].offsetY = (float) (rand() % 100 - 100 / 2);
        stars[n].offsetR = (float) (rand() % 25 - 25 / 2);
     } else 
     {
        stars[n].offsetX = 0.0;            //kalau tipenya streak dan modenya normal
        stars[n].offsetY = 0.0;            //tidak ada offset
        stars[n].offsetR = 0.0;
     }
}

void RotatePoint(float *x, float *y, float rotation) //fungsi rotate dengan derajat
{                                                    //sebesar rotation
     float tmpX, tmpY;

     tmpX = *x * Cos(rotation) - *y * Sin(rotation); //*x baru = x*cos(teta) - y*sin(teta)
     tmpY = *y * Cos(rotation) + *x * Sin(rotation); //*y baru = y*cos(teta) + x*sin(teta)
     *x = tmpX;
     *y = tmpY;
}

void MoveStars(void)                //fungsi pergerakan bintang
{
     float offset;                  //offset >> speed maju alias di sumbu z
     GLint n;                       //n= jumlh bintang

     offset = speed * 60.0;         

     for (n = 0; n < starCount; n++) {                //untuk setiap bintang
         stars[n].x[1] = stars[n].x[0];               //x1=x0
         stars[n].y[1] = stars[n].y[0];               //x1=x0
         stars[n].z[1] = stars[n].z[0];               //x1=x0
         stars[n].x[0] += stars[n].offsetX;           //x0=x0+offsetX
         stars[n].y[0] += stars[n].offsetY;           //y0=y0+offsetY
         stars[n].z[0] -= offset;                     //z0=z0-offset >> bintang maju
         stars[n].rotation += stars[n].offsetR;       //sudut=sudut+offsetR
         
         if (stars[n].rotation > MAXANGLES) {         //kalau sudut > maxAngle,
            stars[n].rotation = 0.0;                  //sudut diset 0
         }
     }
}

GLenum StarPoint(GLint n) //fungsi kemunculan bintang pada bidang gambar
{
  float x0, y0;

  x0 = stars[n].x[0] * windW / stars[n].z[0]; // x0= x0*windowsize/z
  y0 = stars[n].y[0] * windH / stars[n].z[0]; // y0= y0*windowsize/z
  RotatePoint(&x0, &y0, stars[n].rotation);   // bintang dirotate
  x0 += windW / 2.0;                          // x0 = x0+(width/2)
  y0 += windH / 2.0;                          // y0 = yo+(width/2)

  if (x0 >= 0.0 && x0 < windW && y0 >= 0.0 && y0 < windH) { //kalau x0>0,x0<width,y0>0,y0<height
    return GL_TRUE;                                         //true >> bintang muncul
  } else {
    return GL_FALSE;                                        //kalau ngga bintang mati
  }
}

void ShowStar(GLint n)                                    
{
     float x0, y0, x1, y1, width;
     GLint i;

     x0 = stars[n].x[0] * windW / stars[n].z[0];          //line 178-190 sama
     y0 = stars[n].y[0] * windH / stars[n].z[0];          //kaya starPoint(GLint n)
     RotatePoint(&x0, &y0, stars[n].rotation);
     x0 += windW / 2.0;
     y0 += windH / 2.0;

     if (x0 >= 0.0 && x0 < windW && y0 >= 0.0 && y0 < windH) { //kalau bintang muncul
        if (stars[n].type == STREAK) {                         //mode bintang streak
           x1 = stars[n].x[1] * windW / stars[n].z[1];         //posisi relatif x terhadap z
           y1 = stars[n].y[1] * windH / stars[n].z[1];         //posisi relatif y terhadap z
           RotatePoint(&x1, &y1, stars[n].rotation);           //rotate sudut
           x1 += windW / 2.0;                                  //x=x+(width/2)
           y1 += windH / 2.0;                                  //y=y+(height/2)

           glLineWidth(MAXPOS / 100.0 / stars[n].z[0] + 1.0);  //bikin garis sebesar (JumlahPosisiMax/100)/z bintang ke n + 1
           glColor3f(1.0, (MAXWARP - speed) / MAXWARP, (MAXWARP - speed) / MAXWARP); //warna=merah+(derajat kuning=warp-speed)+(derajat hijau=warp-speed/warp)
           if (fabs(x0 - x1) < 1.0 && fabs(y0 - y1) < 1.0) { //kalau |x0-x1|<1,|y0-y1|<1 
              glBegin(GL_POINTS);                            //gambar titik di (x0,y0)
              glVertex2f(x0, y0);
              glEnd();
           } 
           else {
                glBegin(GL_LINES);                           //kalau tidak, gambar garis
                glVertex2f(x0, y0);                          //yang menghubungkan 
                glVertex2f(x1, y1);                          //(x0,y0),(x1,y1)
                glEnd();
           }
        } 
        else {                                               //kalau tipenya normal
        width = MAXPOS / 10.0 / stars[n].z[0] + 1.0;         //lebar=PosisiMax/10/posisi z star ke n+1
        glColor3f(1.0, 0.0, 0.0);                            //warna=merah
        glBegin(GL_POLYGON);                                 //gambar poligon
        for (i = 0; i < 8; i++)                              //buat 8 poligon di x,y
        {                                                    //dengan ketentuan
            float x = x0 + width * Cos((float) i * MAXANGLES / 8.0); //x=x0+lebar*cos(i*MaxAngle/8)
            float y = y0 + width * Sin((float) i * MAXANGLES / 8.0); //y=y0+lebar*sin(i*MaxAngle/8)
            glVertex2f(x, y);
       };
      glEnd();
    }
  }
}

void UpdateStars(void)                         //fungsi update star
{
  GLint n;                                     //n=banyaknya bintang

  glClear(GL_COLOR_BUFFER_BIT);                

  for (n = 0; n < starCount; n++) {            //setiap n smpai jumlah bintang
    if (stars[n].z[0] > speed || (stars[n].z[0] > 0.0 && speed < MAXWARP)) { 
      if (StarPoint(n) == GL_FALSE) {
        NewStar(n, MAXPOS); //kalau starPoint mati, posisi z > speed atau z>0,speed<maxwarp
      }                     //buat bintang baru sebanyak n
    } 
    else {
      NewStar(n, MAXPOS);  //kalau starPoint nyala, buat bintang baru sebanyak n
    }
  }
}

void ShowStars(void)
{
  GLint n;

  glClear(GL_COLOR_BUFFER_BIT);

  for (n = 0; n < starCount; n++) {
    if (stars[n].z[0] > speed || (stars[n].z[0] > 0.0 && speed < MAXWARP)) {
      ShowStar(n);    //untuk setiap bintang, bila z>speed atau z>0,speed<maxwarp
    }                 //jalankan fungsi showstar
  }
}

static void Init(void)
{
  float angle;
  GLint n;

  srand((unsigned int) time(NULL));

  for (n = 0; n < MAXSTARS; n++) {
    NewStar(n, 100);
  }

  angle = 0.0;
  for (n = 0; n <= MAXANGLES; n++) {
    sinTable[n] = sin(angle);
    angle += PI / (MAXANGLES / 2.0);
  }

  glClearColor(0.0, 0.0, 0.0, 0.0);

  glDisable(GL_DITHER);
}

void Reshape(int width, int height)
{
  windW = width;
  windH = height;

  glViewport(0, 0, windW, windH);

  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  gluOrtho2D(-0.5, windW + 0.5, -0.5, windH + 0.5);
  glMatrixMode(GL_MODELVIEW);
}

void pressKey(unsigned char key, int x, int y) {
// Fungsi ini akan dijalankan saat tombol keyboard ditekan dan belum dilepas
// Selama tombol ditekan, variabel angle dan move diubah => kamera bergerak

    switch (key) {
        case ' ':
        flag = (flag == NORMAL) ? WEIRD : NORMAL;
        break;
        
        case 't':
        nitro = 1; 
        break;
        
        case 'p':
        speed = 0; 
        break;
        case 'o':
        speed = 1.0;                                                 0; 
        break;
        
        case 'q':
        exit(0);
    }
}

void Idle(void)
{
  MoveStars();
  UpdateStars();
  if (nitro > 0) { //nitro aktif
    speed = (float) (nitro / 10) + 1.0; //speed=(nitro/10)+1
    if (speed > MAXWARP) {
      speed = MAXWARP;
    }
    if (++nitro > MAXWARP * 10) {
      nitro = -nitro;
    }
  } else if (nitro < 0) {
    nitro++; //tambah nitro
    speed = (float) (-nitro / 10) + 1.0; //speed=(-nitro/10)+1
    if (speed > MAXWARP) {
      speed = MAXWARP;
    }
  }
  glutPostRedisplay();
}

void Display(void)
{
  ShowStars();
  if (doubleBuffer) {
    glutSwapBuffers();
  } else {
    glFlush();
  }
}

void Visible(int state)
{
  if (state == GLUT_VISIBLE) {
    glutIdleFunc(Idle);
  } else {
    glutIdleFunc(NULL);
  }
}


//kaga tau
static void Args(int argc, char **argv)

{
  GLint i;

  doubleBuffer = GL_TRUE;

  for (i = 1; i < argc; i++) {
    if (strcmp(argv[i], "-sb") == 0) {
      doubleBuffer = GL_FALSE;
    } else if (strcmp(argv[i], "-db") == 0) {
      doubleBuffer = GL_TRUE;
    }
  }
}



int main(int argc, char **argv)
{
  GLenum type;

  glutInitWindowSize(windW, windH);
  glutInit(&argc, argv);
  Args(argc, argv);//apaan?
  
  type = GLUT_RGB;
  type |= (doubleBuffer) ? GLUT_DOUBLE : GLUT_SINGLE;
  glutInitDisplayMode(type);
  glutCreateWindow("Stars");

  Init();

  glutReshapeFunc(Reshape);
  glutKeyboardFunc(pressKey);
  glutVisibilityFunc(Visible);
  glutDisplayFunc(Display);
  glutMainLoop();
  return 0;             /* ANSI C requires main to return int. */
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Tugas LKP 11

Deadline diperpanjang sampai hari Senin, 28 November 2011

Kirim ke aditya.erlangga@yahoo.co.id

 

#include<stdio.h>
#define N 100

struct map{                         //membuat struct map
       int item;
       int count;
       };

typedef struct map MAP ;            //membuat alias struct map dengan MAP

MAP Map[N];                         //deklarasi variabel array Map[N] dengan tipe data MAP dengan N=100

void whoami(MAP Map[N]){            //fungsi whoami
              int i, j, item, count, n=4;
              for (i=2; i<=n; i++){
                                  item = Map[i].item;
                                  count = Map[i].count;
                                  j = i;
                                  while ((j>1) && (Map[j-1].count<count)){
                                                                          Map[j].count = Map[j-1].count;
                                                                          Map[j].item = Map[j-1].item;
                                                                          j = j - 1;
                                                                          }
                                  Map[j].item= item;
                                  Map[j].count= count;
                                }

              printf("Outputnya : \n");
              for(i=0;i<n;i++){
                        printf("%d %d\n", Map[i].item, Map[i].count);
                        }
              }

main(){
                                                  //fungsi utama 
       int n, i;
       scanf("%d", &n);                          //input nilai n
       for(i=0;i<n;i++){
                        scanf("%d %d", &Map[i].item, &Map[i].count);  //input isi array
                        }
       whoami(Map); //memanggil fungsi whoami
       getch();
       return 0;
       }

 

Array (praktikum 8)

#include <stdio.h>

void maks(int a[], int n){
    int i, max=a[0];
    for (i=0;i<n;i++){
        if(a[i]>max)
                       max=a[i];
        }
    printf("Nilai maksimun : %d\n", max);
    }

void min(int a[], int n){
    int i, min=a[0];
    for (i=0;i<n;i++){
        if(a[i]<min)
                       min=a[i];
        }
    printf("Nilai minimum : %d\n", min);
    }

void jumlah(int a[], int n){
    int i, jum=0;
    for (i=0;i<n;i++)
                     jum+=a[i];
    printf("Jumlah isi array : %d\n", jum);
    }

void rata(int a[], int n){
    int i, jum=0;
    float rataan;
    for (i=0;i<n;i++)
                     jum+=a[i];
    rataan=(float)jum/n;

    printf("Nilai rata-rata : %.2f\n", rataan);
    }

main(){
       int a[100], i, n, p, q, r;
       float s;

       printf("Masukkan jumlah data : ");
       scanf("%d", &n);

       printf("Masukkan isi array :\n");
       for(i=0;i<n;i++)
                       scanf("%d", &a[i]);

       maks(a, n);
       min(a,n);
       jumlah(a,n);
       rata(a,n);

       return 0;
       }

 

Analisis Search Usability website Bank Mandiri

Saat ini, riset terbaru telah menyarankan, bahwa desain website adalah tool pencarian yang paling efektif, bukan fasilitas search itu sendiri. Pengalaman dan dari berbagai studi menunjukkan bahwa search engine sebenarnya dapat menurunkan kesempatan user untuk mencapai target, dan orang-orang lebih memilih browsing. Browsing dan navigation links lebih menunjukkan kepada hasil yang diinginkan. Kebanyakan dari user akan beralih pada fasilitas search ketika fasilitas yang ada tidak berhasil. (Galitz, 2007).

Saya akan mencoba menganalisis fitur search yang ada pada website Bank Mandiri (http://www.bankmandiri.co.id). Panduan yang digunakan adalah panduan dari http://www.userfocus.co.uk/resources/searchchecklist.html. Pertama, yang dianalisis adalah search box. Pada awal tampilan, sama sekali tidak ditemukan adanya search box. Search box baru muncul ketika user telah masuk ke page “Home” atau masuk ke menu “Corporate Website“, “Investor Relations“, dan “Layanan 24 jam“.

Kedua, analisis posisi search box. Search box biasanya berada pada di tempat yang strategis, umumnya adalah pojok kanan atas. Tetapi kenyataannya posisinya ada di sebelah kiri tengah dibawah banner besar.

Ketiga, fitur search. Search Box ternyata tidak berdiri sendiri, melainkan tergabung dalam fitur “Useful Tool & Links“, bersama dengan link lain yang seharusnya tidak perlu menggunakan form drop down. Sebagian user akan kebingungan menggunakan fitur search yang mana karena banyaknya tombol “Go“.

Keempat, pencarian kosong. Ketika pencarian kosong, hasil pencariannya tidak menampilkan bahwa hasil pencariannya tidak menghasilkan apapun, malah menampilkan hampir seluruh link yang ada. Untungnya pencarian telah dikategorikan kedalam top 10 sehingga tidak semua link di load. Bila form kosong dan yang ditekan go, barulah keluar pop up untuk mengulangi form isian.

Kelima, hasil pencarian. Hasil pencarian tidak diurutkan dalam relevansi. Bahkan header pada hasil pencarian ada yang tidak menampilkan sama sekali kata kunci yang ditampilkan. Hasil pencarian juga tidak menampilkan revisi bila terjadi kesalahan ketik.

Keenam, search tidak dapat melakukan pencarian dengan enter, harus menekan button “go”. Hal itu sangat merepotkan bila user terbiasa menekan enter, tapi tidak terlalu bermasalah bagi pengguna mobile atau tablet.

Overall, sistem pencariannya cukup buruk.

Perbaikan yang dapat dilakukan:

· Memperbaiki sistem search, kemiripan

· Penyeragaman tombol go dengan enter

· Memberi imformasi tambahan dibawah headline

· Selalu menampilkan form search dimanapun

Sumber:

Anonim. (2011) 20 Search Usability Guidelines [Internet]. Tersedia dari : <http//www.userfocus.co.uk/resources/searchchecklist.html> [Diakses 22 Oktober 2011].

Galitz, WO. 2007. The Essential Guide to User Interface Design: an Introduction to GUI Design Principles and Techniques. Indiana: Wiley Publishing Inc.

Nielson J. (2011) Top 10 Mistakes in Web Design [Internet]. Tersedia dari : <http://www.useit.com/alertbox/9605.html> [Diakses 22 Oktober 2011].

Analisis 10 Kesalahan Desain Website

Berikut adalah 10 kesalahan dari desain website menurut Jakob Nielsen.

1. Bad Search

Untuk beberapa search engine internal, tidak mampu untuk mengatasi kesalahan penulisan (typo) dalam penulisan query yang diinginkan. Saya mencoba mengetikkan kata kunci yang salah ketik, yaitu “ucing garong mp3” di http://www.4shared.com/

pencarian dengan kata "ucing garong"

Ternyata tidak dapat ditemukan file dengan query tersebut. Terkadang hal tersebut mengganggu untuk sebagian user terutama untuk pengguna berusia lanjut, yang ingin melakukan pencarian tetapi lupa sebagian kata-kata query dan tidak persis.

hasil pencarian tidak mendapatkan hasil

Google masih lebih baik, dengan mencantumkan “tebakan” yang sekiranya relevan dengan pencarian bila terjadi salah ketik.

google menawarkan revisi pencarian

 2. PDF Files for Online Reading

Membaca secara online tentunya menyenangkan, akan tetapi bila dalam bentuk pdf, maka akan membatasi pandangan karena pdf telah dioptimasi untuk membaca lembaran sheet. Contoh kasusnya adalah pada website Departemen Statistik Universitas Winconsin-Madison (http://www.stat.wisc.edu/ )

homepage universitas Wincounsin-Madison

Ketika masuk pada link “Worshop on Design and Analysis of Experiments, June 27”, yang muncul adalah list dari acara tersebut yang ditampilkan dalam file pdf*.

tampilan pdf di browser

Secara estetika, penggunaan file pdf kurang baik karena tidak semua browser tepat cocok dengan ukuran font dari isi pdf. Selain itu juga, tidak semua browser mampu menampilkan fie pdf secara langsung di browser. Alih-alih ingin membaca, user akan dipaksa untuk mendownload file pdf tersebut bila browsernya tidak dilengkapi dengan plug-in pdf reader.

3. Not Changing the color of Visited Links

Link adalah faktor kunci dari sebuah navigasi, dimana user harus mengetahui link mana yang sudah dikunjungi atau belum. Cara termudah adalah dengan cara mengganti warna link yang sudah dikunjungi, sehingga user tidak akan tersesat di jalan dan mengurangi kemungkinan user secara tidak sengaja memuat halaman yang sama berkali-kali.

Masih dengan website yang sama dengan file pdf yang sebelumnya telah dibahas, ketika file pdf telah dimuat, bila kita lakukan kembali pada homepage website, ternyata tidak ada perubahan warna apapun, hanya sekilas ada semacam border yang mengelilingi link tersebut. Border itu tidak terlalu jelas bila dipandang dari jauh.

border mengelilingi link

4. Non-Scannable Text

Tampilan teks yang monoton sangat mengganggu dalam interactive experience. Salah satu contohnya adalah walkthrough game Red Alert 3.

(http://faqs.ign.com/articles/941/941246p1.html)

wujud tampilan walkthrough

Sulit sekali membacanya bukan? Dengan tidak ada perbedaan ukuran font, penekanan kata (efek bold), penggunaan istilah (efek italic) serasa membaca kodingan program yang membosankan. Apalagi ditambah dengan posisi margin kanan yang tidak sama. “Hujan Teks” memaksa kita untuk membaca satu persatu tiap barisnya. Dan hal tersebut tidak estetis.

5. Fixed Font Size

Untuk beberapa kasus, resize font size sangat membantu bagi user yang berusia lanjut. Akan tetapi untuk beberapa style sheet seperti CSS atau web berbasis flash mampu memberi kontrol untuk menonaktifkan resize font size. Contohnya adalah website We Choose The Moon (http://wechoosethemoon.org)

website wechoosethemoon.org

Pada saat website dibuka, tidak sedikitpun browser mampu untuk melakukan zooming.

6. Page Titles with Low Search Engine Visibility

Page title dalam sebuah website berisi tag HTML <title> dan selalu dipakai dalam sebuah headline untuk list dalam search engine result pages (SERP). Contoh yang diangkat adalah website resmi Kerajaan Inggris Raya (www.royal.gov.uk)

website royal.gov.uk

Fokus dari website ini saya rasa adalah British Monarchy, dimana untuk grammar bahasa Inggris harus menggunakan kata the di depan British Monarchy. Akan tetapi pada hasil pencarian di google ternyata memuat judul headline yaitu kata “Welcome to the official website of the British Monarchy”.

hasil pada google

Menurut saya untuk tagline “Welcome to …” tidak begitu baik dalam SERP, karena website royal.gov.uk akan diarsipkan dalam katalog ‘W’, bukan ‘R’ dalam makna “Royal”. Alangkah lebih baik bila tag headline diubah menjadi “The Official Website of The British Monarchy” atau “The British Monarchy: Official Website” sehingga website akan diarsipkan pada katalog “T”.

7. Anything That Looks Like an Advertisement

Seringkali desain dari website mempengaruhi fokus dari perhatian user. Contohnya: Desain gambar yang didalamnya menuju link tertentu. Apabila desainnya cenderung menyerupai iklan online (misal terdapat animasi yang berlebihan), user cenderung akan meninggalkan gambar tersebut dan tidak akan mengeksplorasi (lebih dalam). Contohnya adalah website info lomba dan kompetisi terbaru (http://ajangkompetisi.com/)

link yang tampak seperti banner iklan

8. Violating Design Conventions

Menurut Hukum Jakob tentang Web User Experience mengatakan bahwa “user meluangkan waktunya sebagian besar di website lain.” Oleh karena itu, desain yang aneh, ataupun tidak biasa, akan menyulitkan user. Contohnya adalah di Toko Sepatu Dot Net (http://www.tokosepatu.net/)

website tokosepatu.net

Menurut saya penempatan kategori diatas header sangat menyulitkan user yang ingin mencari informasi tentang tipe sepatu. Akan lebih baik bila mengikuti konvensi yang sudah umum, misalnya dibawah header, memberi aksen penegas tambahan, atau ditempatkan di sidebar bagian atas.

9. Opening New Browser Windows

Ketika kita mengklik sebuah link, normalnya browser akan langsung memuat halaman yang kita klik tersebut. Tetapi ada pula link yang sudah diatur fix di new window atau new tab. Contohnya ada pada website 4shared (http://www.4shared.com/) . Saat ini saya iseng iseng mencari lagu “aku bukan bang toyib”

hasil pencarian di 4shared

Ketika link tersebut diklik, ternyata terbuka pada tab baru. Bagitu pula dengan link lainnya. Hal ini bisa memberi manfaat, tetapi juga membingungkan pada navigasinya, karena seolah-olah kita tidak bisa kembali lagi (dikarenakan new tab dan tampilan back yang non-aktif).

link terbuka pada new window

10. Not Answering User’s Question

Tujuan user sebenarnya simpel: ada sesuatu yang mereka cari. Apabila informasi itu tidak mereka dapatkan di suatu website. Mereka akan pergi mencari website lain yang masih relevan tapi menampilkan apa yang mereka cari. Contoh konkritnya adalah di website alat musik pabrikan Roland. (http://www.roland.com)

website roland.com

Saya mencoba mencari salah satu produk dari Roland, yaitu piano digital Roland seri RD 700NX.

pencarian pada website

Dan memang ada, pada overview yang merupakan main site dari produk tersebut.

hasil pencarian

Ketika di klik, langsung muncul tampilannya sebagai berikut.

tidak ada informasi harga

Akan tetapi, saya tidak menemukan harganya. Ya, harga keyboardnya tidak ditampilkan. Begitu juga dengan barang-barang yang lain. Entah kenapa. Yang jelas, hal ini cuku mengganggu user yang ingin mencari informasi barang (yang tentunya pasti mencari harganya juga).

Membuat Polygon dan Star segi-N

/* TRANSFORMASI 2D */

#include <stdio.h>
#include <math.h>
#include <GL/glut.h>

//Ukuran layar awal
int HEIGHT = 400;
int WIDTH  = 400;

//Batas koordinat
GLdouble X_MIN = -10;
GLdouble X_MAX =  10;
GLdouble Y_MIN = -10;
GLdouble Y_MAX =  10;

//Membuat grid / petak-petak di bidang gambar
void grid()
{
     double i;

     //Grid-nya
     glColor3f(0.3,0.3,0.3);
     glLineWidth(1);
     glBegin(GL_LINES);
         for(i=0;i<X_MAX;i++)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i>X_MIN;i--)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i<Y_MAX;i++)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
         for(i=0;i>Y_MIN;i--)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
     glEnd();

     //Titik Pusat (0,0)
     glColor3f(1.0,1.0,1.0);
     glPointSize(5);
     glBegin(GL_POINTS);
         glVertex2f(0,0);
     glEnd();
}

// Pola segi-N beraturan
void segiN(int N, double x, double y, double size)
{
     int i;
     double cons=2*3.14/N;
     double pX;
     double pY;

     glLineWidth(2);
     glBegin(GL_LINE_LOOP);
     for(i=0;i<N;i++)
     {
         pX=sin(i*cons)*size+x;
         pY=cos(i*cons)*size+y;
         glVertex2f(pX,pY);
     }
     glEnd();
}

//Pola Bintang
void polaBintang(int N, double x, double y, double size)
{
     int i;
     double cons=2*3.14/N;
     double pX;
     double pY;

     glLineWidth(2);
     glColor3f(1.0,1.0,0);

     glBegin(GL_LINE_LOOP);
         //Vertex ganjil
         for(i=1;i<=N;i+=2)
         {
             pX=sin(i*cons)*size+x;
             pY=cos(i*cons)*size+y;
             glVertex2f(pX,pY);
         }  

         if(N%2==0)
         {
             glEnd();
             glBegin(GL_LINE_LOOP);
         }

         //Vertex genap
         for(i=2;i<=N;i+=2)
         {
             pX=sin(i*cons)*size+x;
             pY=cos(i*cons)*size+y;
             glVertex2f(pX,pY);
         }  

     glEnd();
}

void gambarObjek() {
     glLineWidth(2);
     glBegin(GL_LINE_LOOP);

        glVertex2f(0.0, 3.0);
        glVertex2f(5.0, 0.0);
        glVertex2f(0.0, 0.0);

     glEnd();
}

void display(){
     glClear(GL_COLOR_BUFFER_BIT);
     grid();

     segiN(60,0,0,10);
     polaBintang(5, 0, 0, 10);
     // Objek asli
     //glColor3f(0.8,0.8,0.8);
     //gambarObjek();

     // Objek hasil transformasi
     glPushMatrix();

     glColor3f(1.0,0.0,0.0);
        // Transformasi di sini... (glRotatef, glTranslatef, glScalef)
        // Format:
        glTranslatef(0, 3, 0);
        glRotatef(45, 0, 0, 1);
        glScalef(1.0, -1.0, 1.0);
        glRotatef(-45, 0, 0, 1);
        glTranslatef(0, -3, 0);

        gambarObjek();

     glPopMatrix();

     glFlush();
}

void init()  {
     glClearColor( 0.0, 0.0, 0.0, 0.0);
     glMatrixMode(GL_PROJECTION);
     glLoadIdentity();
     gluOrtho2D(X_MIN,X_MAX,Y_MIN,Y_MAX);
     glMatrixMode(GL_MODELVIEW);
}

int main( int  argc,  char  **argv)  {
    glutInit( &argc, argv);
    glutInitWindowSize(WIDTH, HEIGHT);
    glutInitWindowPosition(0, 0);
    glutCreateWindow("Transformasi");
    glutDisplayFunc(display);      

    // Anti-aliasing (memperhalus tampilan)
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_POINT_SMOOTH);
    glEnable(GL_LINE_SMOOTH);
    glEnable(GL_POLYGON_SMOOTH);

    init();
    glutMainLoop();
    return 0;
}

Refleksi terhadap Garis y=x-3

/* TRANSFORMASI 2D */

#include <stdio.h>
#include <math.h>
#include <GL/glut.h>

//Ukuran layar awal
int HEIGHT = 400;
int WIDTH  = 400;

//Batas koordinat
GLdouble X_MIN = -10;
GLdouble X_MAX =  10;
GLdouble Y_MIN = -10;
GLdouble Y_MAX =  10;

//Membuat grid / petak-petak di bidang gambar
void grid()
{
     double i;

     //Grid-nya
     glColor3f(0.3,0.3,0.3);
     glLineWidth(1);
     glBegin(GL_LINES);
         for(i=0;i<X_MAX;i++)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i>X_MIN;i--)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i<Y_MAX;i++)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
         for(i=0;i>Y_MIN;i--)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
     glEnd();

     //Titik Pusat (0,0)
     glColor3f(1.0,1.0,1.0);
     glPointSize(5);
     glBegin(GL_POINTS);
         glVertex2f(0,0);
     glEnd();
}

void gambarObjek() {
     glLineWidth(2);
     glBegin(GL_LINE_LOOP);

        glVertex2f(0.0, 3.0);
        glVertex2f(5.0, 0.0);
        glVertex2f(0.0, 0.0);

     glEnd();
}

void display(){
     glClear(GL_COLOR_BUFFER_BIT);
     grid();

     // Objek asli
     glColor3f(0.8,0.8,0.8);
     gambarObjek();

     // Objek hasil transformasi
     glPushMatrix();

     glColor3f(1.0,0.0,0.0);
        // Transformasi di sini... (glRotatef, glTranslatef, glScalef)
        // Format:
        glTranslatef(0, 3, 0);
        glRotatef(45, 0, 0, 1);
        glScalef(1.0, -1.0, 1.0);
        glRotatef(-45, 0, 0, 1);
        glTranslatef(0, -3, 0);

        gambarObjek();

     glPopMatrix();

     glFlush();
}

void init()  {
     glClearColor( 0.0, 0.0, 0.0, 0.0);
     glMatrixMode(GL_PROJECTION);
     glLoadIdentity();
     gluOrtho2D(X_MIN,X_MAX,Y_MIN,Y_MAX);
     glMatrixMode(GL_MODELVIEW);
}

int main( int  argc,  char  **argv)  {
    glutInit( &argc, argv);
    glutInitWindowSize(WIDTH, HEIGHT);
    glutInitWindowPosition(0, 0);
    glutCreateWindow("Transformasi");
    glutDisplayFunc(display);      

    // Anti-aliasing (memperhalus tampilan)
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_POINT_SMOOTH);
    glEnable(GL_LINE_SMOOTH);
    glEnable(GL_POLYGON_SMOOTH);

    init();
    glutMainLoop();
    return 0;
}

Refleksi terhadap Sumbu Y 2D

/* REFLEKSI SUMBU Y 2D */

#include <stdio.h>
#include <math.h>
#include <GL/glut.h>

//Ukuran layar awal
int HEIGHT = 400;
int WIDTH  = 400;

//Batas koordinat
GLdouble X_MIN = -10;
GLdouble X_MAX =  10;
GLdouble Y_MIN = -10;
GLdouble Y_MAX =  10;

//Membuat grid / petak-petak di bidang gambar
void grid()
{
     double i;

     //Grid-nya
     glColor3f(0.3,0.3,0.3);
     glLineWidth(1);
     glBegin(GL_LINES);
         for(i=0;i<X_MAX;i++)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i>X_MIN;i--)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i<Y_MAX;i++)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
         for(i=0;i>Y_MIN;i--)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
     glEnd();

     //Titik Pusat (0,0)
     glColor3f(1.0,1.0,1.0);
     glPointSize(5);
     glBegin(GL_POINTS);
         glVertex2f(0,0);
     glEnd();
}

void gambarObjek() {
     glLineWidth(2);
     glBegin(GL_LINE_LOOP);

        glVertex2f(0.0, 3.0);
        glVertex2f(5.0, 0.0);
        glVertex2f(0.0, 0.0);

     glEnd();
}

void display(){
     glClear(GL_COLOR_BUFFER_BIT);
     grid();

     // Objek asli
     glColor3f(0.8,0.8,0.8);
     gambarObjek();

     // Objek hasil transformasi
     glPushMatrix();

        // Transformasi di sini... (glRotatef, glTranslatef, glScalef)
        // Format:
        // glRotatef(sudut, x, y, z)

        glScalef(-1.0, 1.0, 1.0);

        glColor3f(1.0,0.0,0.0);
        gambarObjek();

     glPopMatrix();

     glFlush();
}

void init()  {
     glClearColor( 0.0, 0.0, 0.0, 0.0);
     glMatrixMode(GL_PROJECTION);
     glLoadIdentity();
     gluOrtho2D(X_MIN,X_MAX,Y_MIN,Y_MAX);
     glMatrixMode(GL_MODELVIEW);
}

int main( int  argc,  char  **argv)  {
    glutInit( &argc, argv);
    glutInitWindowSize(WIDTH, HEIGHT);
    glutInitWindowPosition(0, 0);
    glutCreateWindow("Transformasi");
    glutDisplayFunc(display);      

    // Anti-aliasing (memperhalus tampilan)
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_POINT_SMOOTH);
    glEnable(GL_LINE_SMOOTH);
    glEnable(GL_POLYGON_SMOOTH);

    init();
    glutMainLoop();
    return 0;
}

Refleksi terhadap Sumbu X 2D

/* TRANSFORMASI 2D */

#include <stdio.h>
#include <math.h>
#include <GL/glut.h>

//Ukuran layar awal
int HEIGHT = 400;
int WIDTH  = 400;

//Batas koordinat
GLdouble X_MIN = -10;
GLdouble X_MAX =  10;
GLdouble Y_MIN = -10;
GLdouble Y_MAX =  10;

//Membuat grid / petak-petak di bidang gambar
void grid()
{
     double i;

     //Grid-nya
     glColor3f(0.3,0.3,0.3);
     glLineWidth(1);
     glBegin(GL_LINES);
         for(i=0;i<X_MAX;i++)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i>X_MIN;i--)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i<Y_MAX;i++)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
         for(i=0;i>Y_MIN;i--)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
     glEnd();

     //Titik Pusat (0,0)
     glColor3f(1.0,1.0,1.0);
     glPointSize(5);
     glBegin(GL_POINTS);
         glVertex2f(0,0);
     glEnd();
}

void gambarObjek() {
     glLineWidth(2);
     glBegin(GL_LINE_LOOP);

        glVertex2f(0.0, 3.0);
        glVertex2f(5.0, 0.0);
        glVertex2f(0.0, 0.0);

     glEnd();
}

void display(){
     glClear(GL_COLOR_BUFFER_BIT);
     grid();

     // Objek asli
     glColor3f(0.8,0.8,0.8);
     gambarObjek();

     // Objek hasil transformasi
     glPushMatrix();

        // Transformasi di sini... (glRotatef, glTranslatef, glScalef)
        // Format:
        // glRotatef(sudut, x, y, z)

        glScalef(1.0, -1.0, 1.0);

        glColor3f(1.0,0.0,0.0);
        gambarObjek();

     glPopMatrix();

     glFlush();
}

void init()  {
     glClearColor( 0.0, 0.0, 0.0, 0.0);
     glMatrixMode(GL_PROJECTION);
     glLoadIdentity();
     gluOrtho2D(X_MIN,X_MAX,Y_MIN,Y_MAX);
     glMatrixMode(GL_MODELVIEW);
}

int main( int  argc,  char  **argv)  {
    glutInit( &argc, argv);
    glutInitWindowSize(WIDTH, HEIGHT);
    glutInitWindowPosition(0, 0);
    glutCreateWindow("Transformasi");
    glutDisplayFunc(display);      

    // Anti-aliasing (memperhalus tampilan)
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_POINT_SMOOTH);
    glEnable(GL_LINE_SMOOTH);
    glEnable(GL_POLYGON_SMOOTH);

    init();
    glutMainLoop();
    return 0;
}

Scaling>Translating 2D

/* SCALING > TRANSLATE 2D */

#include <stdio.h>
#include <math.h>
#include <GL/glut.h>

//Ukuran layar awal
int HEIGHT = 400;
int WIDTH  = 400;

//Batas koordinat
GLdouble X_MIN = -10;
GLdouble X_MAX =  10;
GLdouble Y_MIN = -10;
GLdouble Y_MAX =  10;

//Membuat grid / petak-petak di bidang gambar
void grid()
{
     double i;

     //Grid-nya
     glColor3f(0.3,0.3,0.3);
     glLineWidth(1);
     glBegin(GL_LINES);
         for(i=0;i<X_MAX;i++)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i>X_MIN;i--)
         {
             glVertex2f(i,Y_MAX);
             glVertex2f(i,Y_MIN);
         }
         for(i=0;i<Y_MAX;i++)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
         for(i=0;i>Y_MIN;i--)
         {
             glVertex2f(Y_MAX,i);
             glVertex2f(Y_MIN,i);
         }
     glEnd();

     //Titik Pusat (0,0)
     glColor3f(1.0,1.0,1.0);
     glPointSize(5);
     glBegin(GL_POINTS);
         glVertex2f(0,0);
     glEnd();
}

void gambarObjek() {
     glLineWidth(2);
     glBegin(GL_LINE_LOOP);

        glVertex2f(0.0, 3.0);
        glVertex2f(5.0, 0.0);
        glVertex2f(0.0, 0.0);

     glEnd();
}

void display(){
     glClear(GL_COLOR_BUFFER_BIT);
     grid();

     // Objek asli
     glColor3f(0.8,0.8,0.8);
     gambarObjek();

     // Objek hasil transformasi
     glPushMatrix();

        // Transformasi di sini... (glRotatef, glTranslatef, glScalef)
        // Format:
        // glRotatef(sudut, x, y, z)
        glTranslatef(-2.0, 0.0, 0.0);
        glScalef(2.0, 2.0, 1.0);

        glColor3f(1.0,0.0,0.0);
        gambarObjek();

     glPopMatrix();

     glFlush();
}

void init()  {
     glClearColor( 0.0, 0.0, 0.0, 0.0);
     glMatrixMode(GL_PROJECTION);
     glLoadIdentity();
     gluOrtho2D(X_MIN,X_MAX,Y_MIN,Y_MAX);
     glMatrixMode(GL_MODELVIEW);
}

int main( int  argc,  char  **argv)  {
    glutInit( &argc, argv);
    glutInitWindowSize(WIDTH, HEIGHT);
    glutInitWindowPosition(0, 0);
    glutCreateWindow("Transformasi");
    glutDisplayFunc(display);      

    // Anti-aliasing (memperhalus tampilan)
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_POINT_SMOOTH);
    glEnable(GL_LINE_SMOOTH);
    glEnable(GL_POLYGON_SMOOTH);

    init();
    glutMainLoop();
    return 0;
}