Custom Search







 
 

#WebDesign : Kerangka layout dan bagian pengaturan padding pada 960Grid System

2017-10-07


Menggunakan kerangka layout untuk mendesain halaman web dengan 960Grid system adalah dengan menempatkan setiap baris div dengan penamaan class container_12 atau container_16. setiap bagian kerangka dalam satu baris dapat dipisah kolom menggunakan class grid_1 hingga grid_ukuran kontainer yang dipilih (container_12 atau container_16)
sebagai contoh dibuat sebuah kerangka layout container_12 dengan 2 baris. Pada baris ke-1 berisi 2 kolom dan pada baris ke-2 berisi 4 kolom. code: ‹div class="container_12"›
   ‹div class="grid_6"›Baris 1 Kolom 1‹/div›
    ‹div class="grid_6"›Baris 1 Kolom 2‹/div›
‹/div›
‹div class="container_12"›
    ‹div class="grid_3"›Baris 2 Kolom 1‹/div›
    ‹div class="grid_3"›Baris 2 Kolom 2‹/div›
    ‹div class="grid_3"›Baris 2 Kolom 3‹/div›
    ‹div class="grid_3"›Baris 2 Kolom 4‹/div›
‹/div›


keterangan :
‹div class="container_12"› merupakan kerangka layout untuk baris
‹div class="grid_n"›[ element html ]‹/div› merupakan kerangka layout untuk kolom

Untuk penempatan dan pengaturan isi atau element didalam kerangka layout, dapat diatur dengan memberikan div didalam kerangka layout (jangan memberikan style padding atau margin pada kerangka layout) code:
‹div class="container_12"›
    ‹div class="grid_6"›‹div style="padding:10px"›Baris 1 Kolom 1‹/div›‹/div›
    ‹div class="grid_6"›‹div style="padding:10px"›Baris 1 Kolom 2‹/div›‹/div›
‹/div›
‹div class="container_12"›
    ‹div class="grid_3"›‹div style="padding:10px"›Baris 2 Kolom 1‹/div›‹/div›
    ‹div class="grid_3"›‹div style="padding:10px"›Baris 2 Kolom 2‹/div›‹/div›
    ‹div class="grid_3"›‹div style="padding:10px"›Baris 2 Kolom 3‹/div›‹/div›
    ‹div class="grid_3"›‹div style="padding:10px"›Baris 2 Kolom 4‹/div›‹/div›
‹/div›

penempatan div pada masing masing kerangka layout didalam colom tidak memerlukan ukuran width karena akan menyesuaikan pada ukuran grid system.

 
 

#WebDesign : Pembagian Peranan HTML, CSS dan JavaScript Dalam Web Desain

2017-09-17


HTML adalah bahasa markup yang digunakan untuk menampilkan berbagai informasi yang di inputkan ke dalam website seperti gambar, teks, video, dan lainnya sehingga bisa di tampilkan melalui browser (penjelajah web). Selain itu HTML juga bisa digunakan untuk membuat sebuah link yang nantinya menuju ke sebuah halaman website lainnya dengan kode tertentu. Peranan HTML adalah sebuah kode/baris dasar penulisan element yang digunakan sebagai kebutuhan menampilkan data. Beberapa element dasar yang ada dalam dokument HMTL seperti : <h1>..<h6>, <p>,<br>,<hr> dan sebagainya yang digunakan sebagai dasar informasi pada dokument web.


Cascading Style Sheet (CSS), yaitu sebuah bahasa berbasis text yang digunakan untuk memformat tampilan dari halaman web dari element dasar yang dibuat dengan HTML. Dengan adanya CSS maka memungkinkan untuk menampilkan halaman yang sama dengan format yang berbeda. Ada 3 cara penulisan CSS yaitu:

  • Diletakkan langsung pada element HTML yang dituju dengan menambahkan atribut STYLE
  • Diletakkan dalam 1 dokumen HTML, dengan petanda Element, spesifik element (ID) atau Pengelompokan (Class)
  • Diletakkan dalam file CSS terpisah menggunakan element <link rel...>

CSS berperan sebagai aturan yang digunakan dalam memberikan pola pada sebuah element dasar HTML, beberapa aturan seperti warna, jarak, ukuran dibuat dalam memberikan aturan pada CSS.

JavaScript merupakan bahasa pemrograman yang berjalan pada browser. Peranan JavaScript merupakan sekumpulan baris perintah yang digunakan untuk memberikan interaksi user dengan dokument HTML atau pengaturan pada CSS . Javascript membuat sebuah fungsi animasi, rollover, fade, interaksi yang membutuhkan sebuah interaktif dalam dokument HTML. Meski semua bisa dikerjakan menggunakan perintah Java Script namun kini penulisan baris perintah javascript semakin dimudahkan dengan library bernama JQuery.

 
 

#WebDesign : Scalable Vector Graphics (SVG)

2017-09-02


Scalable Vector Graphics atau lebih dikenal dengan nama SVG merupakan grafik yang kini telah didukung oleh kebanyakan web browser modern. Teknologi ini sudah dapat digunakan sejak HTML5 diperkenalkan. SVG dimaksudkan untuk menjadi sebuah alternatif yang lebih baik saat menampilkan vector graphics dibandingkan dengan menggunakan format gambar yang lama seperti PNG, JPG dan GIF.

Beberapa manfaat jika sebuah website menggunakan gambar dengan format SVG antara lain :

  • Ukuran flexibel tanpa mengurangi ketajaman gambar
  • Ukuran File yang kecil (coding)
  • Dapat dengan mudah diedit dengan CSS, SVG dibuat menggunakan illustrator

Mendesain gambar dengan format SVG dapat dilakukan di Adobe Illustrator (AI), atau mengexport format .eps pada Adobe Photoshop untuk kemudian dipindahkan ke AI menggunakan menu "Save As" (Secara default file .svg dapat dihasilkan oleh AI). Contoh sederhana menggambar kotak di Ai berwarna merah dengan ukuran 100px x 100px. koordinat 0,0 untuk dijadikan format svg maka tampilan code file svg dari AI sebagai berikut :

<?xml version="1.0" encoding="utf-8"?> ]> <svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <rect x="0" y="0" fill="#D83030" stroke="#000000" stroke-miterlimit="10" width="100" height="100"/> </svg>

untuk penggunaan pada html dapat dengan menggunakan element <img src="kotak.svg">

 
 

#Flash / AS3 : TweenMax (GreenShock)

2017-07-21


TweenMax merupakan salah satu Class yang ada pada Library GreenShock untuk memudahkan gerak animasi secara dinamis menggunakan ActionScript 3.0. TweenMax hanya dapat menangani beberapa perubahan properties pada object (MovieClip) diantaranya penanganan untuk gerak atau posisi, transparansi, perubahan ukuran, rotasi hingga beberapa filter standart. Menggunakan TweenMax memiliki beberapa efek ease yang cukup mudah ditambah, EventComplete yang menjalankan suatu fungsi atau proses yang diinginkan apabila animasi telah selesai berjalan, hingga onCompleteParams yang dapat digunakan untuk mengirim parameter kedalam fungsi yang dipanggil setelah animasi telah selesai dijalankan (EventComplete). TweenMax memiliki proses waktu yang dihitung berdasarkan milisecond.

Sebagai contoh dibuat sebuah object (MovieClip) yang akan bergerak ke koordinat x: 90 selama 3 milisecond, kemudian setelah animasi telah berhasil berjalan maka akan mengirimkan parameter object(MovieClip) dan nilai int kedalam fungsi onFinishTween code:

TweenMax.to(object_mc, 3, {x:90, onComplete:onFinishTween, onCompleteParams:[5, object_mc]}); function onFinishTween(paramInt:int, paramObj:MovieClip){}

 
 

#Flash / AS3 : TIMER atau EnterFrameEvent

2017-07-21


Dalam penanganan animasi gerak untuk sebuah object (misalnya game) penggunaan Timer atau EnterFrameEvent dapat dilakukan. Timer menggunakan nilai interval yang dibentuk diawal dan untuk perubahan tiap interval dilakukan pada TimerEvent.Timer. Sedangkan EnterFrameEvent merupakan method yang dimiliki oleh object (MovieClip) dengan menggunakan jedah FPS yang ada pada pengaturan stage.

Dalam Game penggunaan Timer digunakan untuk penanganan waktu dalam permainan, sedangkan EnterFrameEvent digunakan untuk object runtime yang beranimasi seperti untuk gerak object (Movieclip). Apabila Timer berhenti gunakan perintah timer.stop(). sedangkan untuk EnterFrameEvent menggunakan perintah removeEventListener. Karena penggunaan EnterFrameEvent pada object runtime, apabila object dihapus maka perlu menonaktifkan EnterFrameEvent menggunakan perintah removeEventListener, baru kemudian menghapus object runtime tersebut.

 
 

#Flash / AS3 : JSON

2017-07-21


Sejak generasi Adobe Flash CS 6, ActionScript 3.0 memiliki method yang memudahkan untuk penanganan format JSON. Perintah parse digunakan untuk membaca isi data JSON. Memanggil external file JSON (.txt) menggunakan URLLoader dan URLRequest kemudian setelah proses load berhasil,gunakan perintah JSON.parse(evt.target.data) contoh format JSON yang dapat dibaca oleh flash:
{"json":[{"nama":"becak","roda":3},{"nama":"mobil","roda":4},{"nama":"sepeda","roda":"2"}]}
Hasil dari JSON.parse dapat ditampung dalam data Array pada Flash (misal:arr) untuk kemudian digunakan dalam proses data array pada umumnya di Flash. Sedangkan untuk membuat format JSON gunakan perintah JSON.stringify(arr); dimana konversi dilakukan dengan mengubah format data array yang ada pada Flash menjadi mode String (format JSON).

 

copyright ©thuanproject 2017 All Right Reserved
Email: thuanproject@gmail.com