Category Archives: Resume

Per minggu

Resume04 (29 September 2010)

by 


 Presentation and Layout

   Image
   Type image : * GIF        * BMP        * TIF       * swf
                     * JPEG      * PNG        * SVG       * dll......

   Perbedaan GIF dan JPEG
    GIF
    - Komponen gambar tidak ada yang hilang
    - memiliki 256 warna atau 8 bit
    - GIF bisa animasi


    JPEG
    - Lossy/ketajaman gambar ada yang hilang
    - Memiliki 24-bit
    - Tidak bisa transparan >> gampar yang tidak diikuti oleh background.


    * Lossless >> tidak ada ketajaman yang hilang, sedangakan lossy >> adda ketajaman yang hilang.
    * Format gambar utuh : BMP, TIF, RAW



   KOMPONEN WARNA
  1. RGB (Red Green Blue) >> menjadi standart warna dalam HTML.
  2. Grayscale >> merupakan komponen RGB, tetapi semuanya menjdai satu kesatuan yang memiliki rentan warna.
  3. CMYK (Cyant Magenta Yellow blacK) >> biasa digunakan untuk printing, seperti cetak poster, banner, dll.
  4. HSB >> turunan warna RGB yang terdapat warna hue.
  5. Y Cb Cr >> biasa digunakan untuk memisahkan warna kulit.

HTML IMAGE BASICS

<img src = “logo.gif> —> insert gambar

<img src = “logo.gif”   alt = “robot”    width = “156”    height = “251”    border = “0” />

ket :

* alt = untuk menampilkan teks, apabila gambar tidak muncul

* width = untuk mengatur panjang gambar

*height = untuk mengatur lebar gambar

* border = untuk mengatur garis gambar

<p><img src = ” ”   align = “top/middle /bottom”     alt = ” ”    border=” “/></p>

ket :

perintah di atas untukmengatur alignment gambar

gambar bisa diatur atas, bawah atau tengah.

<a href = “http://&#8230;..com”> <img src = ” ”    alt =” “/> </a>

ket : image sbagai link ke halaman brikutnya (button).

Image map

<img src=” ”    usemap=”#shapes”    alt=” ”   border=” “>

<div>

<map name= “shapes”  id=”shapes”>

<area shapes=”rect”    coords=”6,50,140,143″    href=”rectangle.html”    alt= ” “/>

<area shapes=”circle”  coords=”195, 100,50″  href=”circle.html”  alt= ” “/>

<area shapes=”poly”  coords=” ”   href=”poly.html”    alt= ” “/>

<area shapes=”default”   href=”defaultreg.html”    alt= ” “/>

</map>

</div>

ket :image map digunakan untuk memberi tanda yang dapat dilink ke halaman lain, seperti yang diaplikasikan pada facebook (tag photo).

* usemap = “#shapes” >> untuk mengetahui bentuknya

* pemberian nama id tergantung dengan nama usemap

* area shape >> untuk menunjukkan bentuk yang diinginkan

* coords >> untuk meletakkan koordinat

—> coords pada rect berartie titik ke (6,50) sampai titik (140,143)

—> coords pada cicle (letak koor dari atas,  letak koor dari kiri, diameter)

—> coords pada polygon terdiri dari letak beberapa titik yang akan digabungkan.

* default >> ketika meng-klik di sembarang tempat, maka akan nge-link ke suatu halaman.

* href >> untuk menyambungkan ke halaman lain.


Resume3 (15 September 2010)

by

Producing HTML

  • Biasanya cliet-side bertanggung jawab pada tampilan web.
  • WYSIWYG editor berguna dalam mempercepat develop web. Aplikasi WYSIWYG editor diantaranya KOMPOZER dari Mozilla, DREAMWEAVER dari adobe, dan FRONTPAGE yang telah berubah menjadi VISUAL WEB DEVELOPER.

PERBEDAAN HTML & XHTML

  • XHTML lebih teratur dalam penulisan tag.
  • XHTML sudah support untuk mobile device browser.
  • XHTML merupakan gabungan dari XML dan TAG.

HTML sebaiknya memenuhi hal-hal berikut ini :

  1. Mengikuti tata cara penulisan markup.
  2. Harus diperiksa terlebih dahulu apakah hasil yang ditampilkan sudah sama dengan rancangan (validasi).
  3. Memisahkan script, style, dan struktur.
  4. Dalam pemberian nama, lebih baik memiliki arti. (nama mencerminkan isi)
  5. Sering-sering memberi komentar. –> sbagai pengenal diri pembuat web, juga untuk memudahkan pencarian meta data.
  6. Boleh menggunakan banyak template.

The tag –> untuk menampilkan informasi dalam konsep.

The tag –> bagian utama dari sebuah web.

Sifat-sifat HTML

  1. HTML tidak sesitif terhadap besar kecilnya huruf.
  2. HTML/XHTML mungkin menjadi sensitif apabila perbedaan dalam pemberian nama.
  3. HTML/XHTML sensitif terhadap single spasi.
  4. HTML/XHTML bisa diikuti content model.
  • Elemen yang kosong tetap harus ditutup.
  • Elemen yang tidak terlalu penting lebih baik diminimize.
  • Attribute harus dikasih tanda petik (” “).
  • Attribute dan element yang tidak valid akan diabaikan browser.

Statement

  • <br><br />   = break line
  • <p align=”….”></p>    = alignment text,, titik-titik tersebut dapat diisi dgn center/right/left.
  • <div align=”….”></div>   = 1 div terdiri dari beberapa paragaraf,, titik-titik tersebut dapat diisi dgn center/right/left.
  • <blockquote cite =”http://&#8230;..”> isi/copy dari web </blockquote>   = kutipan
  • <a href = “http://&#8230;.”>      = memperlihatkan asal kutipan.
  • <pre></pre>      = mempertahankan spasi atau bentuk dari teks.

List

1. Ordered List

contoh 1 :

   <ol>
        <li> item 1 </li>
        <li> item 2 </li>
        <li> item 3 </li>
   </ol>

output :

Ordered List 1

contoh 2 :

   <ol>
          <li> item 1 </li>
          <ol>
                 <li> item 1 </li>
                 <li> item 2 </li>
          </ol>    

          <li> item 2 </li>
          <ol>
                 <li type="a"> list jadi huruf kecil</li>
                 <li type="A"> list jadi huruf kapital</li>
                 <li type="i"> list jadi i  </li>
                 <li type="I"> list jadi angka romawi</li>
                 <li type=1> list jadi angka</li>
          </ol>
   </ol>

output :

Ordered List 2

2. Unordered List

contoh :

   <ul>
          <li> unordered list
                <ul>
                      <li> can be nested
                             <ul>
                                    <li> Bullets</li>
                             </ul>
                      </li>
                </ul>
          </li>
    </ul>

output :

Unordered List 1

Resume2 (08 September 2010)

by

Kerangka HTML secara garis besar :

<HTML>

<HEAD>

<BODY>

</BODY>

</HTML>

  • Heading —> judul

H1 ….. Hn

WEB DEVELOPMENT OVERVIEW

Waterfall merupakan model digunakan untuk menganalisa dan merancang web.

–> merupakan model paling sederhana dan mudah dipahami.

The waterfall model :

  1. Mendefinisikan masalah –> Apa permasalahan utama? Bagaimana konsepnya?
  2. Menganalisa kebutuhan –> Mencari kebutuhan real/utama.
  3. Membuat desain/prototyping –> Bagaimana input/output?
  4. Implementasi dari unit casting –> Menguji apakah cara pembuatan sudah benar?
  5. Memasang software pada server
  6. Serah terima, menjalankan dan mengupdate data kepada user.

GOALS AND PROBLEMS

Beberapa masalahyang sering terjadi mengenai tujuan seorang manajemen merancang web :

  1. Tidak memiliki tujuan yang jelas.
  2. Web digunakan hanya untuk mengikuti trend tanpa ada perawatan.
  3. Web hanya memberi sedikit keuntungan.

BRAINSTORMING

–> Mendiskusikan pada tim, apa mungkin ada tujuan-tujuan lain? dan tujuan mana yang akan didahulukan?

AUDIENS

  1. Dimana lokasinya?
  2. Berapa usianya?
  3. Apa gender-nya?
  4. Apa bahasa yang mereka gunakan?
  5. Seberapa canggih pengguna sehingga dapat digunakan/diakses?
  6. Apa ada keterbatasan fisik pada pengguna?
  7. Koneksi apa yang digunakan oleh user?
  8. Komputer dan web browser apa yang mereka gunakan?

THE SITE PLAN

  1. Short goal statement –> tujuan keseluruhan situs dan pengukuran dasar kesuksesan.
  2. Detailed goal discussion –> tujuan situs secara rinci dan memberikan target yang terukur untuk memverifikasi manfaat dari situs.
  3. Audience discussion –> menggambarkan kedua karakteristik audiens.
  • Usage Discussion : Bagian ini membahas berbagai tugas skenario kunjungi untuk pengguna situs.
  • Content Requirements : Bagian situs yang menyediakan semua daftar teks, gambar, dan media lainnya yang dibutuhkan oleh situs.
  • Technical Requirements : Bagian situs yang memberi ikhtisar jenis teknologi sebuah situs yang akan diakses.
  • Visual Requirements : Bagian situs yang menguraikan persyaratan visual sebagai dasar pertimbangan untuk desain antarmuka.
  • Delivery Requirements : Bagian ini menganalisis seberapa banyak halaman dan sering situs kita akan diakses oleh user guna memperkirakan penggunaan hosting, hardware, bandwith, dll.
  • Miscellaneous Requirements : Bagian ini membutuhkan persyaratan-persyaratan kebutuhan yang lebih detail misalnya mengenai bahasa, hukum, dll.
  • Site Structure Diagram : Bagian ini memberikan diagram flow yang merinci bermacam-macam bagian dalam sebuah situs.
  • Staffing : Bagian ini merinci sumber daya atau kebutuhan yang dibutuhkan untuk menajalankan sebuah situs.
  • Time Line : menunjukkan bagaimana sebuah proyek akan diproses menggunakan perkiraan karyawan sebelumnya dikombinasi dengan tahap dalam model proses yang diuraikan pada bab sebelumnya.
  • Budget : rincian sumber daya atau kebutuhan yang diperlukan untuk menjalankan sebuah situs.

FASE DESAIN

WIRE FRAMES –> SCREEN AND PAPER COMPS –> CREATING THE MOCK SITE –> PRODUCING THE HTML –> WYSIWYG PROMISES…

WIRE FRAMES : membuat kerangka web.

–> Langkah ini merupakan langkah terpenting karena langkah ini akan menentukan apakah user mau memasuki kerangka web tersebut.

SCRREEN AND PAPER COMPS : Pada tahap ini, perancang dapat membuat sketsa atau komposit digital yang menunjukkan lebih rinci contoh visual dari halaman khas di situs.

MOCK SITE : Membuat cetakan.

WYSIWYG : What You See Is What You Get

(09410100075)


– tujuan situs secara rinci dan memberikan target yang terukur untuk memverifikasi manfaat dari situs.

Resume1 (01 September 2010)

by

Web development merupakan terminologi yang luas yang bekerja dalam pengembangan web baik internet maupun intranet.

>> Sifat Web programing

1. Stateless : sesuatu yang tidak terikat secara baku.

2. Multiplatform, dimana pengguna web dapat mengakses web tanpa ada batasan OS ataupun device, sehingga dengan berbagai OS dan device, web tetap dapat diakses.

jenis-jenis multiplatform —> berdasarkan OS, dimana web dapat diakses oleh berbagai OS baik windows maupun Linux.

—> berdasarkan device, dimana web dapat diakses melalui PC, Ipad, laptop,dll.

3. Navigation centric : web tersaji dan berkerja berdasarkan tombol navigasi / menu-menu.

4. Base on Page : informasi yang didapat dihubungkan antar halaman berdasarkan navigasi.

5. Just Browser

6. Less Secure : aplikasi web masih belum aman.

Kapan membuat aplikasi web

  • Informasi diakses semua orang >> ketika informasi yang kita dapatkan, ingin kita share kepada orang lain.
  • Infrastruktur pengguna tidak terbatas
  • Pengguna aplikasi minim >> dimana dalam penggunaan aplikasinya, si pengguna tidak perlu mengatur aplikasi tersebut hingga mendetail, hanya dengan sedikit pengaturan pengguna dapat mengakses.
  • Sedikit penggunaan fasilitas OS >> web tidak bergantung pada satu OS saja, tetapi dapat diakses oleh berbagai macam OS.
  • Sekuritas minimal >> web tidak terhubung denga barcode dan sensor lainnya, kecuali menggunakan smart card.

website : kumpulan halaman yang menampilkan informasi data teks, data gambar, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman.

website juga sering disebut dengan situs.

Elemen-elemen Web

  1. Web page : dokumen yang ditulis dalam bentuk format HTML (Hyper Text Markup Language)
  2. Web server : sebuah perangkat lunak yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web dengan format HTML (umumnya). contohnya : apache, microsoft, qq.com, google, nginx, sun, lighttpd.
  3. Web hosting : jenis layanan hosting internet yang memungkinkan individu dan organisasi untuk membuat situs mereka sendiri dapat diakses melalui world wide web
  4. Web browser : suatu program yang memberi fasilitas untuk menjelajahi internet serta menemukan dan menampilkan halaman-halaman web.
  5. Web Design : produksi tampilan dan nuansa situs dan semua elemen visual, termasuk tata letak halaman, latar belakang dan citra spot, skema warna, tipografi, tombol navigasi, dll.
  6. Server site scripting : teknologi web server dimana permintaan pengguna terpenuhi dengan menjalankan skrip langsung pada server web untuk menghasilkan halaman web dinamis.
  7. Client site scripting : umumnya mengacu pada kelas program komputer di web yang dieksekusi client-side, oleh web browser pengguna, bukan di sisi server.
  8. HTML : bahasa untuk mendeskripsikan halaman web.
  • bukanlah bahasa pemrograman, tetapi bahasa markup yang terdiri dari serangkaian tag markup yang berguna untuk menjelaskan halaman web.