Ahmad Maulana

Rabu, 19 Agustus 2015

Source Code Pre-loader Rainbow - CSS3

Hai, kali ini gue bakalan share Source Code Preloader Rainbow dengan CSS 3 Animation. CEKIDOT!!!!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>loader</title>
</head>
<body>
<div class="loader">
 <div class="loader-inner">
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
 </div>
</div>
</body>
</html>

File style.css

.loader {
    background: #000;
    background: radial-gradient(#222, #000);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.loader-line-wrap {
    animation: 
  spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
 ;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}

@keyframes spin {
    0%, 15% {
  transform: rotate(0);
 }
 100% {
  transform: rotate(360deg);
 }
}

Belajar HTML Dasar : Pengertian Tag pada HTML

Pengertian Tag

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.
Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

 Ini adalah sebuah paragraf 

 adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
 adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda backslash(/)

Jika kita lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun hal ini memudahkan kita, namun tidak disarankan.

Contohnya lainnya, jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:

Ini adalah sebuah paragraf. Hanya kumpulan beberapa kalimat.

Paragraf ini terdiri dari 3 kalimat.

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi: “Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.”

Tag  pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag  untuk menebalkan tulisan (b, singkatan dari bold).

Tutorial Menampilkan Gambar di HTML

Dalam era informasi sekarang ini, semua website pasti mempunyai / memasukkan gambar pada web. Nah, pada tutorial kali ini kita akan mempelajari cara memasukkan gambar di HTML. Dengan menggunakan tag <img> , kita dapat memasukkan image ke html.

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
Buat folder bernama latihan. Lalu, pindahkan image yang akan dipakai untuk latihan. Pada contoh dibawah ini saya menggunakan sebuah gambar dinda.jpg (pacar saya hihi) yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menampilkan Gambar</title>
</head>
<body>
 <h2>Menampilkan Gambar</h2>
 <img src="dinda.jpg" >
</body>
</html>

Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />

Hati-hati dengan penulisan atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.

Nah, jika kalian sudah bisa / berhasil menampilkan gambar di html (ngga copas ya, biar pinter :* ), sekarang kita akan mempelajarai tag ALT. Tag image juga memiliki atribut penting lainnya, yaitu alt
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web browser telah disetting untuk tidak menampilkan gambar.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menampilkan Gambar</title>
</head>
<body>
 <h2>Menampilkan Gambar</h2>
 <img src="dinda.jpg" alt="Dinda Cantik">
</body>
</html>as

NOTE: JIKA INGIN MENAMPILKAN IMAGE YANG ADA DI LUAR FOLDER FILE HTML, KALIAN CUKUP MENAMBAHKAN ../ CONTOH <img src=”../dinda.jpg”>.

Jika kebingungan bisa komentar di bawah! CMIIW!

Minggu, 14 Juni 2015

Tipografi

Oke guys, kali ini gue bakalan nge-share ilmu yang gue dapet di sekolah, gue bakalan share materi tentang tipografi. Penasaran? yuuukk scroll down !

Anatomi huruf dalam Tipografi.

Setiap bentuk huruf dalam sebuah alfabet memiliki keunikan fisik yang menyebabkan mata kita dapat membedakan antara huruf ‘m’ dengan ‘p’ atau ‘C’ dengan ‘Q’. Keunikan ini disebabkan oleh cara mata kita melihat korelasi antara komponen visual yang satu dengan yang lain.

Sekelompok pakar psikologi dari Jerman dan Austria pada tahun 1900 memformulasikan sebuah teori yang dikenal dengan teori Gestalt.

Gestalt adalah sebuah teori yang menjelaskan proses persepsi melalui pengorganisasian komponen-komponen sensasi yang memiliki hubungan, pola, ataupun kemiripan menjadi kesatuan. Teori gestalt beroposisi terhadap teori strukturalisme. Teori gestalt cenderung berupaya mengurangi pembagian sensasi menjadi bagian-bagian kecil.

Jadi, Tipografi itu adalah ..

Suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

Tipografi sebagai Citra/Image

Symbol/ Lambang/ Tanda
Menyampaikan bunyi/ pesan/ informasi
Sebagai atribut/ identitas
Media / elemen dalam visual
Karakteristik bentuk dan impresi
Kredibilitas
Fungsi
Kejelasan dan ketegasan

Anatomi Huruf

Jenis Huruf

Serif

Serif, Mempunyai serif/lentik diujungnya. Dengan ciri memiliki sirip/kaki/serif yang berbentuk lancip pada ujungnya. Persis mendekati ujung kaki-kaki hurufnya, baik di bagian atas maupun bawah, terdapat pelebaran yang menyerupai penopang atau tangkai.

Kesan yang ditimbulkan adalah klasik, anggun, lemah gemulai dan feminin. Menurut sejarah, asal-usul bentuk huruf ini adalah mengikuti bentuk pilar-pilar bangunan di Yunani Kuno.

Contoh Huruf Serif

Sans-serif

Sans Serif, Sans artinya tidak ada, yang berarti tidak ada serif/lentik diujungnya. Dengan ciri tanpa sirip/serif, dan memiliki ketebalan huruf yang sama atau hampir sama. Kesan yang ditimbulkan oleh huruf jenis ini adalah modern, kontemporer dan efisien.

Huruf Sans-serif biasanya di gunakan pada kondisi-kondisi berikut ini:

Huruf amat kecil (seperti tulisan bahan-bahan di label makanan)
Huruf amat besar (seperti di plang-plang merek) yang harus dilihat dari jauh di layar monitor

Huruf sans serif kadang lebih mudah dibaca.

WHY? Karena justru kaki-kaki font serif memperumit bentuk huruf sehingga sedikit lebih lama dibaca. Jika huruf kecil sekali atau pada resolusi rendah seperti di layar monitor, kaki serif bisa tampak bertindihan dan menghalangi pandangan.

Contoh huruf Sans-serif

Script

Script, Huruf sambung atau script bisa juga Anda sebut “huruf tulis tangan” (handwriting) karena menyerupai tulisan tangan orang. Atau bisa juga disebut “huruf undangan” karena hampir selalu hadir di kartu-kartu undangan karena dipandang indah dan anggun. Ada berbagai macam huruf script dan handwriting, mulai dari yang kuno hingga modern, dari yang agak lurus hingga miring dan amat “melingkar-lingkar”. Kesan yang ditimbulkannya adalah sifat pribadi dan akrab.

Contoh huruf script.

Miscellaneous/Decorative

Miscellaneous/Decorative, merupakan pengembangan dari bentuk-bentuk yang sudah ada. Ditambah hiasan dan ornamen, atau garis-garis dekoratif. Kesan yang dimiliki adalah dekoratif dan ornamental. Unggulnya font ini karena telah diperciki nilai-nilai estetika.

Contoh huruf decorative

Slab-serif

Slab-serif atau biasa juga dikenal dengan nama egyptian. Sedikit hal tentang jenis slab-serif ini, jenis font slab-serif ini merupakan bagian dari jenis font serif. Hanya saja jenggernya berupa garis lurus yang tegas.

Contoh Huruf Slab-serif

Rockwell

Bodoni

Oke, sekian materi tentang Typography. Jangan lupa share!!

Kamis, 14 Mei 2015

Mengenal Resolusi Gambar dan Resolusi Cetak

Istilah resolusi gambar sudah banyak digunakan orang, namun hampir semuanya digunakan dalam pemahaman yang salah. Tidak semua orang memahami apa itu resolusi gambar. Artikel ini akan menjelaskan secara singkat apa itu resolusi gambar dan fungsinya terhadap gambar.

Mengenal Resolusi Gambar

Secara umum, resolusi adalah tingkat kualitas sebuah gambar. Resolusi bisa diukur dalam berbagai cara, Anda bisa membacanya di Wikipedia. Khusus di artikel ini, kita akan membahas perhitungan resolusi melalui jumlah pixel dalam gambar, yang disebut sebagai resolusi pixel.

Resolusi adalah jumlah pixel dalam satu persegi satuan tertentu. Misalnya, gambar dengan resolusi 300 pixel per inci (ppi) berarti untuk setiap kotak dengan luas 1 inci persegi memiliki 300 pixel. Semakin kecil resolusi artinya setiap kotak satu persegi memiliki lebih sedikit pixel. Semakin besar resolusi, maka semakin banyak pixel yang terkandung dalam setiap kotak satu persegi.

Gambar di bawah menunjukkan jumlah pixel dalam satu kotak persegi. Gambar pertama dengan resolusi 1 pixel per kotak persegi memiliki total 1 pixel di dalamnya. Gambar ketiga memiliki resolusi 25 pixel per kotak persegi. Semakin banyak pixel maka semakin jelas tampilan gambar.

Resolusi dalam Hasil Cetak dan Layar

Resolusi pixel, yaitu jumlah pixel dalam satu kotak persegi, akan berpengaruh pada hasil cetak. Tapi, dalam layar komputer, resolusi pixel tidak mempunyai pengaruh sama sekali. Lihat dua gambar berikut. Gambar pertama memiliki resolusi 150 ppi dan satu lagi 300 ppi. Keduanya di monitor Anda akan terlihat sama, tidak ada bedanya.


150 Ppi

300 Ppi

Adapun ketika dicetak, maka ukurannya akan mengikuti jumlah pixel di dalamnya.

Kedua gambar di atas memiliki jumlah pixel yang sama. Layar komputer Anda menampilkan pixel, sehingga resolusi tidak berpengaruh. Anda bisa mendesain gambar untuk web dengan resolusi 72 ppi, 300 ppi, atau bahkan 1 ppi. Tidak jadi masalah. Karena layar komputer hanya memperhitungkan jumlah pixelnya. Ketika dicetak, printer akan menampilkan ukuran pixel sesuai nilai resolusi. Jika resolusi gambar kecil, maka pixel akan ditampilkan di kertas dalam ukuran lebih besar. Resolusi terlalu kecil akan membuat hasil cetaknya pecah. Jika resolusi gambar lebih besar, pixel akan dicetak lebih kecil sehingga hasilnya terlihat jelas.

Penutup

Anda baru saja memahami apa itu resolusi gambar dan hubungannya dengan pixel. Di artikel selanjutnya, akan kita bahas bagaimana cara mengubah resolusi, mengubah ukuran gambar, dan berbagai hal lain yang berhubungan.

Google Rilis Peluncur Aplikasi Android di OS Chrome, Windows, Mac, dan Linux

Google terus berupaya untuk memperlebar pengaruh Android. Salah satu upaya tersebut terlihat dari telah dirilisnya App Runtime for Chrome (ARC) untuk para developer. Melalui ARC, pengembang akan bisa menjalankan aplikasi mereka dengan bantuan browser Chrome.

ARC merupakan sebuah proyek yang membuat aplikasi Android bisa berjalan di Chrome OS. Setelah sebelumnya terbatas hanya pada kelompok tertentu, ARC sekarang dirilis sehingga setiap orang bisa membuat aplikasi Android yang juga bisa dijalankan di Windows, Mac, dan Linux serta Chrome OS.

Aplikasi yang disebut ARC Welder tersebut akan menangani konversi aplikasi dari versi Android (APK) (mobile) ke versi komputer (desktop) dengan hanya melakukan beberapa kali klik. Salah satu proses yang dilaporkan berhasil adalah mengubah aplikasi Twitter Android hingga bisa berjalan dengan baik di platform Windows.

Selain ARC Welder, ARC juga memiliki Google Play Services sehingga bisa terintegrasi dengan layanan Google lain seperti Google+. Namun demikian ARC tidak memasukkan semua layanan Play Services sehingga beberapa aplikasi bisa menampilkan galat, terutama yang memakai skema pembelian dalam aplikasi.

Mengenai Saya

Arsip Blog