Tugas CSS Aplikasi Rich Internet

CSS (Cascading Style Sheet) merupakan salah satu fasilitas yang disediakan untuk pemrograman HTML agar dalam hal memformat teks sampai memformat layout para designer dapat mengatur dan mendesain dengan sendirinya. Dengan menggunakan CSS para designer akan dapat mempermudah untuk mengatur style elemen yang berada pada halaman web nya.

h1 {color:blue;}

keterangan:    pada “h1” itu disebut selector

pada “{color:blue;}” itu disebut declaration

pada “color” itu disebut property

pada “blue” itu disebut value

• Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class. 
• Declaration itu menerangkan style yang akan dibuat. Declaration terdiri dari property dan value. Property dapat diisi dengan jenis warna, ukuran, perataan margin dan lainnya sedangkan Value diisi dengan nilai dari property nya itu sendiri, misalnya red untuk warna dan lainnya. 

Jenis-Jenis CSS antara lain adalah sebagai berikut:

• Internal --> property dari CSS diatur di antara tag STYLE yang diletakkan di antara tag HEAD.
• Eksternal --> pendefinisian style dilakukan pada file tersendiri. Untuk mengakses style eksternal, digunakan tag LINK.
• Inline --> digunakan langsung pada tag yang berada di dalam BODY dengan menggunakan atribut STYLE, untuk melakukan pengaturan dengan property pada CSS. 

1. Properti font-size untuk mengatur besarnya huruf. Contohnya font-size: large;
2.  Properti font-family untuk berguna untuk menentukan nama font. Contohnya font-family: verdana;
3. Properti font-style untuk mengatur teks untuk dimiringkan atau tidak. Contohnya font-style: italic;
4. Properti text-indent untuk melakukan indentasi, yaitu menjorokkan baris pertama agak ke kanan. Contohnya text-indent: 40%;
5. Properti line-height untuk menentukan jarak vertical antara satu baris dengan baris di atas atau di bawahnya. Contonya line-height: 800%;
6. Properti text-decoration untuk mengatur teks agar digarisbawahi atau dicoret ataupun dibuat berkedip. Contohnya text-decoration: none; atau text-decoration: underline; atau text-decoration: line-through; atau text-decoration: blink;
7. Properti font-weight untuk menebalkan atau menipiskan teks. Contohnya font-weight: bold;
8. Properti text-transform untuk melakukan konversi terhadap teks. Contohnya text-transform: none; atau text-transform: capitalize; atau text-transform: uppercase; atau text-transform: lowercase;
9. Properti text-align untuk mengatur peletakkan teks pada arah horizontal. Contohnya text-align: left; atau text-align: right; atau text-align: justify; atau text-align: center;
10. Properti color untuk memberikan warna, dapat menggunakan value color red (nama warna) dan #f00 (code hex) untuk menghasilkan warna merah. Contohnya p.red {color: red;} atau p {color: #f00;}
11. Properti letter-spacing untuk mengatur jarak huruf antara huruf satu dengan huruf lainnya. Contohnya p {letter-spacing: 2px;} atau p {letter-spacing: normal;}
12. Properti text-shadow untuk menambahkan efek bayangan pada teks namun tidak semua browser dapat mendukung properti ini. Contohnya p {color: #a01; text-shadow: 1px 1px 1px #000;}
13. Properti white-space untuk mengatur ruang putih pada elemen, dapat menggunakan value nowrap ataupun value normal. Contohnya pre {white-space: nowrap;} atau pre {white-space: normal;}
14. Properti word-spacing untuk menambah atau mengurangi spasi antara kata satu dengan kata lainnya, dapat menggunakan value length maupun value normal. Contohnya p {word-spacing: 5px;} atau p {word-spacing: normal;}
15. Properti background-color untuk memberi sebuah warna yang diinginkan pada background halaman web. Contohnya memberi warna background hijau background-color: green;
16. Properti background-image untuk memberikan sebuah gambar pada background. Contohnya body {background-image: url(img.jpg); }
17. Properti background-position untuk mendeklarasikan posisi gambar background. Contohnya div {background-position: 10px 5px;} atau div {background-position: bottom right;}
18. Properti background-attachment untuk mendeklarasikan lampiran dari gambar background (untuk menggulir dengan isi halaman atau berada dalam posisi tetap). Contohnya div {background-attachment: fixed;} atau div {background-attachment: scroll;}
19. Properti background-repeat untuk mendeklarasikan bagaimana jika sebuah gambar dari background itu diulang. Contohnya div {background-repeat: repeat-x;} atau div {background-repeat: no-repeat;}
20. Properti margin untuk menyatakan semua properti margin yang dijadikan satu yang terdiri dari top, right, bottom, left. Contohnya div {margin: 5px 12px 4px 7px;}
21. Properti table-layout untuk mendeklarasikan tipe dari layout table. Contohnya table {table-layout: auto;} atau table {table-layout: fixed;}
22. Properti outline sebagai properti singkat untuk mengatur semua properti background sekaligus terdiri dari color, style, width. Contohnya div {outline: green solid 2px;} atau div {outline: #00FF00 double thick;}

Prinsip UID dalam website

Alamat website: http://www.vivanews.com/

Prinsip-prinsip yang diterapkan dalam website ini antara lain:

1.      Accessibility :

Halaman website ini tidak begitu membuat user susah dalam mencari informasi-informasi dan tidak mengijinkan user untuk memodifikasi web tersebut walaupun user tersebut belum menggunakan web tersebut.

2.      Aesthetically Pleasing :

Penampilan dari website ini seluruhnya sangat menarik, menggunakan kategori untuk konten berita nya secara spesifik dan website ini pun tidak menggunakan warna yang mencolok.

3.      Availability :

Dalam website ini sudah dapat memberikan banyak Informasi yang diberikan oleh secara nyata (real) dan aktual.

4.      Clarity :

Tampilan website ini sudah sangat jelas, dan informasi yang disajikan nya pun mudah dipahami secara visual maupun konseptualnya.

5.      Compatibility :

Dalam website ini memberikan informasi sesuai dengan temanya yaitu news, yang berisikan konten berita-berita.

6.      Consistency :

Prinsip Consistency dalam website ini sudah sangat terlihat dengan jelas melalui tab yang terdapat dalam halaman website nya.

7.      Directness :

Sistem yang diterapkan pada website ini dapat langsung memberikan efek pada saat user memberikan sebuah perintah.

8.      Efisiensi :

Sistem ini sangat jelas sehingga apapun yang dilakukan user sistem akan meresponnya dengan memberikan data yang tersedia.

9.      Familiarity :

Website ini sudah dapat menggunakan bahasa yang mudah atau tidak asing bagi user ketika sedang mengakses nya.

10.  Flexibility :

Website ini sudah menggunakan sistem yang dapat peka dengan kebutuhan yang berbeda dari setiap user.

11.  Immersion :

Website ini telah menggunakan pencelupan yang cukup jelas.

12.  Obviousness :

Sudah sangat jelas website ini menunjukkan sistem yang mudah dipahami oleh user dan sudah dapat diakses oleh banyak user.

13.  Perceptibility :

Sudah dapat menerapkan sistem yang tidak memandang kemampuan sensorik seseorang.

14.  Responsiveness :

Pada saat user memberikan perintah, maka sistem yang terdapat dalam website ini dapat langsung memberikan responnya.

15.  Visibility :

Dalam halaman awal website ini menyajikan informasi secara umum dan informasi secara spesifiknya sudah disediakan pada tab konten berita tersebut.

16.  Recovery :

Website ini sudah menyediakan form dapat berkomentar.

Prinsip-prinsip yang diabaikan dalam website ini antara lain:

1.      Configurability :

Dalam website ini tidak memberikan hak akses user dalam mengubah tampilan website ini.

2.      Control :

Website ini tidak membataskan usia untuk user dalam penetapan aturan agar user dapat mengakses website tersebut.

3.      Forgiveness :

Dalam website ini tidak menyediakan kotak pesan ketika user melakukan kesalahan saat mengakses website ini.

4.      Operability :

Website ini sangat tergantung dengan kemampuan fisik user.

5.      Safety :

Pada website ini tidak disediakan notif saat melakukan kesalahan.

6.      Simplicity :

Website ini masih menapilkan elemen yang tidak perlu atau tidak penting.

7.      Transparency :

Karena ijin user dalam website ini tidak terfokus pada tugas atau pekerjaan.

8.      Trade-offs :

Karena website ini tidak mendahulukan persyaratan rakyat.

1.      Kelebihan:

-       Konten berita sangat mudah untuk dibaca dan mudah dipahami oleh user.

-       Desain antar muka sudah sangat menarik karena tidak terlalu membuat user bingung atau sulit untuk memahaminya.

-       Konten berita selalu up-to-date sehingga dapat menarik rasa ingin tahu user.

-       Komunikasi antar user sangat bagus dan menarik.

-       Dapat menyesuaikan dengan situasi dan kondisi yang sedang terjadi atau booming.

2.      Kekurangan:

-       Website Vivanews.com ini belum dapat berinteraksi untuk user yang mengalami kekurangan fisik seperti tunanetra.

-       Website terlalu banyak menampilkan iklan yang menjadi sponsor dalam web tersebut.

-       Tampilan home pada website ini tidak teratur dikarenakan sudah terdapat kategori dari konten berita tersebut sehingga tidak perlu lagi konten berita ditampilkan terlalu banyak di home.

Masukkan :

Tampilan dalam website ini harus dapat lebih rapih, tersusun dan menarik lagi.

How Do We Connected to Internet?

     Pertama kali sebelum kita terhubung ke internet dan mengakses WWW (World Wide Web), terlebih dahulu kita harus mempunyai peralatan yang dibutuhkan untuk dapat terhubung kedalam jaringan internet termasuk dengan penyedia layanan internet (Internet Service Provider) tersebut. Peralatan tersebut antara lain:

1.  Komputer (Personal Computer),

2. Modem dan akses saluran telepon atau jaringan local (LAN) yang  akan terhubung ke internet.

3.  Software yang akan dapat membantu kita untuk membuat account dan dapat mengakses internet.

     Dalam hal mengoperasikan web browser saat ini, kita harus mempunyai komputer (PC) yang setara, RAM yang besar dan ruang disk yang mencukupi. Kita juga dapat terhubung ke internet melalui LAN (Local Area Network). Namun jika kita mengakses internet di luar LAN maka kita membutuhkan yang namanya modem, dan modem tersebut lah yang akan menghubungkan kita dengan komputer lain sehingga data dapat dikirim secara bolak balik.

     

    Dan untuk mendapatkan hasil yang terbaik, pastikan bahwa sistem operasi pada komputer kita up-to-date. Agar koneksi pada komputer kita selesai maka kita membutuhkan software yang dapat menjalakan koneksi komputer kita kepada penyedia akses internet, membuat account, dan bekerja dengan data secara langsung. Ada beberapa penyedia akses internet untuk membuat interface (antarmuka) protocol line (Slip) atau point-to-point protocol (PPP) koneksi. Koneksi SLIP atau PPP dapat memungkinkan untuk menjalankan paket perangkat lunak independen seperti Web Browser.

     Ada beberapa browser menggunakan protocol khusus untuk menawarkan fitur tambahan diluar kemampuan standar HyperText Markup Language (HTML) yaitu browser Netscape Navigator dan Microsoft Internet Explorer. Browser Netscape Navigator dan Microsoft Internet Explorer dapat memungkinkan untuk penggunaan plug-in (aplikasi software tambahan yang seolah-olah merupakan bagian integral dari browser tersebut).

   Pada saat ini terdapat dua metode untuk mengakses internet adalah melalui koneksi jaringan yang memungkinkan pengguna memakai LAN (Local Area Network) untuk online dan koneksi dial-up melalui jalur modem dan telepon.

     Kabel Internet-Sistem ini memungkinkan komputer kita untuk menghubungkan ke Internet melalui kabel yang sama yang membawa sinyal TV kita. Biaya layanan bulanan biasanya tidak lebih dari biaya koneksi modem standar, tetapi kita harus menyewa atau membeli "modem kabel." Selain itu, komputer kita akan memerlukan sebuah kartu Ethernet (papan sirkuit khusus yang memungkinkan untuk koneksi jaringan). 

Integrated Services Digital Network (ISDN)-Sebuah saluran ISDN adalah jenis saluran telepon digital yang dapat mengirimkan data banyak kali lebih cepat dari modem dan saluran telepon konvensional. 

Wireless koneksi-Pager, telepon selular dan personal digital assistant (PDA) sekarang memungkinkan berbagai tingkat akses Internet, dari pemberitahuan e-mail ke koneksi Web yang terbatas.