Selasa, 17 Februari 2015

Membuat teks mengalir di sekeliling gambar

Ada kalanya kita ingin membuat seperti di majalah-majalah dimana text mengalir di sekeliling gambar. Mungkin akan lebih jelas jika saya tunjukkan gambar ini:

Bagaimana caranya?
Kita akan memasukkan style CSS ke dalam kode gambar sehingga bisa melakukan aneka macam modifikasi. Insya Allah nanti di bagian CSS kita akan pelajari semua lebih rinci. Karena artikel ini bertujuan untuk membuat text yang mengalir di sekeliling gambar, maka kita bahas bagian itu saja dulu ya.
Untuk menambah CSS di kode HTML, kita cukup menambahkan atribut style saja. Sehingga hasilnya seperti ini:
<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:right"/>
Perhatikan, ada tambahan style="float:right" pada atribut images-nya. Pada contoh diatas, saya buat gambar ada di sebelah kanan dan text mengalir di sebelah kirinya. Apabila ingin gambarnya di kiri dan text di kanan, maka kita cukup mengganti kata right dengan left. Gambar bukan? Contohnya seperti ini:
<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:left"/>
Bisa dimengerti kan?
Oke, insya Allah besok kita bahas bagian HTML yang cukup penting dalam SEO yaitu Heading. Doakan mudah-mudahan punya banyak waktu ya.. Thanks

memasukkan gambara di HTML

Jika sebelumnya kita membahas bagaimana memformat text di HTML, maka sekarang kita akan coba ke teknik yang cukup sering kita pakai juga yaitu bagaimana memasukkan gambar ke dalam HTML
Ada 2 tahap untuk memasukkan gambar dalam HTML yaitu:
  1. Menentukan lokasi gambar
  2. Memasang kode gambar
Lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file HTML yang mengaksesnya. Misalnya file html-nya ada di folder c:\website dan gambarnya ada di folder c:\website\images dengan nama gambarku.jpg maka berarti lokasi file gambarnya adalah
c:\website\images\gambarku.jpg
dan nanti di kode HTML-nya kita tulis seperti ini:
images/gambarku.jpg
Kemudian untuk memunculkan gambar, kita letakkan kode ini di file HTML:
<img src="LOKASI GAMBAR" alt="TEXT ALTERNATIF" />
LOKASI GAMBAR = lokasi dimana gambar itu berada lengkap dengan nama gambarnya TEXT ALTERNATIF = Text yang muncul jika gambar yang kita tampilkan tidak muncul
Jika mengacu pada contoh diatas, berarti kodenya akan seperti ini:
<img src="images/gambarku.jpg" alt="Ini Gambarku"/>

HTML dasar

Sekarang mari coba menuliskan kode HTML pertama kita. Masih ingat file html pertamax.html yang sudah kita buat di pengenalan HTML sebelumnya? Edit file itu menggunakan Notepad. Saya sendiri menyarankan menggunakan Notepad++ sebuah software yang mirip notepad tapi dikhususkan untuk menulis kode-kode programming. Jika anda sempat, silahkan download notepad++ dulu. Tapi pakai notepad bawaan windows juga oke kok.
Sekarang coba ketik ini di notepad anda.
Apa Kabar Dunia!!!
Simpan file itu dan klik dua kali file pertamax.html. Bagaimana hasilnya?
Yup benar, akan muncul tulisan Apa Kabar Dunia di browser anda. Mudah sekali bukan?

TEXT FORMATING

Sekarang bagaimana memanipulasi tampilan tulisan sehingga menghasilkan tampilan yang keren seperti di website-website pada umumnya. Maka disinilah kita mulai belajar HTML. Kita akan melakukan Markup tulisan sehingga bisa muncul sesuai keinginan.
Manipulasi yang pertama adalah Text Formating. Ini adalah manipulasi bagaimana menampilkan text yang sesuai keinginan. Meliputi bagaimana menebalkan text, memiringkan, memberi garis bawah, dll. Kita mulai yuk. Silahkan lihat tabel berikut:
<strong> Menebalkan huruf
<em> Memiringkan huruf
<ins> Menggarisbawahi huruf
<del> Mencoret huruf
<kbd> Membuat huruf keyboard
<sub> Membuat huruf subscripted
<sup> Membuat huruf superscripted
Tag HTML memiliki sepasang tanda yaitu pembuka dan penutup. Misalnya tag strong, dia memiliki dua tag untuk pembuka yaitu <strong> dan penutup </strong>. Untuk menggunakannya, anda tinggal memasang text diantara dua tag tersebut. Contohnya jika ingin menebalkan tulisan kita sebelumnya
<strong>Apa Kabar Dunia!!!</strong>
Sekarang cobalah untuk tag-tag yang lain. Seperti ini misalnya:
<strong>Apa Kabar Dunia!!!</strong>
<em>Apa Kabar Dunia!!!</em>
<ins>Apa Kabar Dunia!!!</ins>
<del>Apa Kabar Dunia!!!</del>
<kbd>Apa Kabar Dunia!!!</kbd>
<sub>Apa Kabar Dunia!!!</sub>
<sup>Apa Kabar Dunia!!!</sup>

Jumat, 10 Oktober 2014

AJAX

Asyncronus JavaScript and Xmlhttp atau di singkat Ajax adalah suatu pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar sehingga halaman web tidak harus di baca ulang ssecara keseluruhan setiap kali seorang pengguna melakukan perubahan.Hal ini akan meningkatkan interaktivitas, kecepatan, usability. Ajax merupakan kombinasi dari:

  • DOM yang diakses dengan client side scripting language, seperti VBscript dan implementasi ECMAscript seperti Javascript dan Jscript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
  • Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.
  • XML umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM
  • JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah
Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.
 

Kamis, 02 Oktober 2014

INTERAKSI MANUSIA DAN KOMPUTER











Materi Interaksi Manusia dan Komputer
 interaksi manusia dan komputer (bahasa inggris: human computer interaction, HCI) adalah disiplin ilmu yang mempelajari hubungan antara manusia dan komputer yang meliputi perancangan, evaluasi, dan implementasi antarmuka pengguna komputer agar mudah di gunakan oleh manusia.Ilmu ini berusaha menemukan cara yang paling efisien untuk merancang pesan elektronik.Sedangkan interaksi manusia dan komputer sendiri adalah serangkaian proses, dialog dan kegiatan yang di lakuukan oleh manusia untuk berinteraksi dengan komputer yang keduanya saling memberikan masukan dan umpan balik melalui sebuah antarmuka untuk memperoleh hasil akhir yang di harapkan.
Ada tiga sub-bidang studi yang berhubungan dengan interaksi dengan komputer:
1. Ergonomi: dimana interaksi manusia-komputer berkaitan dengan bentuk fisik dari mesin
2. Faktor manusia: berkaitan dengan masalah-masalah psikologis
3. Interaksi manusia dan komputer mengkaji bagaimana hubungan-hubungan yang terjadi antar ilmu komputer desain terkait dengan manusia dengan komputer.
Bagi para perancangnya alat fisik interaksi antarmuka komputer sering di uji sehingga memungkinkan pertukaran informasi.
Beberapa aspek yang menjadi fokus yang di gunakan dalam perancangan sebuah antarmuka adalah:
1. Metodologi dan proses yang di gunakan dalam perancangan sebuah antarmuka
2. Metode implementasi antarmuka.
3. Metode evaluasi dan perbandingan antarmuka.
4. Pengembangan antarmuka baru.
5. Mengembangkan sebuah deskripsi dan prediksi atau teori dari sebuah antarmuka baru.

Contoh:
Dalam interaksi manusia dengna komputer terdapat beberapa panca indera di gunakan untuk dapat berinteraksi. Manusia mewujudkan fisiologi yang di perlukan untuk menyerap informasi dalam bentuk suara sama seperti mata dapat melihat berbagai variasi cahaya-rona, briteness, kontras-telinga mampupenginderaan array yang laus dari suara melalui perubahan timbre, kenyaringan dan pitch. Pikiran kemudian dapat mengasosiakan suara ini dengan peristiwa, objek atau gagasan abstrak.Paling sering suara sebagia informasi ada sebagia pidato atau musik dan memang ini akan terus di internet.
Contoh: dalam sebua rumah sakit, suara mengenal elektrokardiograf (EKG) berbunyi 'bip' dalam irama ke jantung; pager alert wanita di sebuah sudut jalan, telegraf memancarkan klik merata-spasi dalam kode morse. Semua ini adalah contoh menampilkan pendengaran, suara yang di buat oleh sebuah mesin dalam rangka berhubungan informasi .Di zaman ketiak bahasa telah menjadi bentuk komunikasi dominan, suara memainkan peran penting dalam hidup kita.

Jumat, 19 September 2014

Teknolgi Web Terbaru Di Indonesia

Tak Hanya Start Menu, Karakter Clippy Juga Akan Hadir Ke Windows 9

Microsoft di kabarkan akan mengembalikan fitur-fitur lama pada produk terbarunya.Setelah sebelumnya muncul kabar kalau mereka mengembalikan start menu, ternyata ada lagi fitur lama yang akan di kembalikan ke OS Windows. Fitur lama tersebut adalah karakter animasi Clippy yang dulu kerap hadir pada software Office milik Microsoft.
Kembalinya sosok Clippy tersebut kemungkinan akan di lakukan oleh Microsoft pada Office 16 dan sseperti pada karakter Clippy di masa lalu, fitur ini pun akan memberikan panduan kepada pengguna Office. Selain itu, Microsoft juga di kabarkan bakal memberikan pendekatan yang lebih modern pada karakter ini, sehingga pengguna Office bisa mmeperoleh informasi dengan mudah.


selain itu, Clippy juga di sebutkan sebagai wujud dari Cortana pada Office di Windows 9. Dengan begitu, pengguna Windows bisa mengucapkan perintah suara untuk mempelajari fitur serta informasi lebih detail mengenai produk Office terbaru itu. Namun kalau hal ini benar di lakukan oleh Microsoft, meka mereka terlebih dulu harus mendatangkan Cortana ke windows.