laporan pratikum iii web

LAPORAN PRATIKUM III

PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Desain Web (Layout dan Menu)Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang

dibimbing oleh Bapak Didik Dwi Prasetya

Oleh :

GISRA RAHMADHITA

130533608259

S1 PTI 2013 Offering B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA

FEBRUARI 2015

BAB IIIDesain Web (Layout dan Menu)

A. TUJUAN

Memahami penggunaan teknik “clear fix” dalam membuat layout website

Memahami fungsi Grid System

Mampu menggunakan teknik “clear fix” dan Grid System untuk membuat layout website

B. ALOKASI WAKTU 4 JS (4 x 50 menit)

C. PETUNJUK

D. DASAR TEORI

1. Permasalahan Penggunaan Property Float Property float berfungsi “mengapungkan” elemen. Sehingga elemen tersebut akan

berpindah sesuai isi dari property float. Permasalahan yang muncul adalah float merusak alur dari halaman. Ketika menggunakan properti float, elemen-elemen lain akan menjadi mengikuti aturan kiri atau kanan dari float. Salah satu cara umum yang dilakukan untuk mengatasi permasalahan float adalah penggunaan clear:both;.

2. Teknik Clear Fix Permasalahan lain muncul setelah penggunaan style clear:both; . Jika kita tidak

mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka style clear:both tidak akan dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan menggunakan teknik “clear fix”.

3. Grid System Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan

menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web. Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Jika ingin membuat halaman berukuran 960 px memiliki 12 Grid, kita dapat melakukan perhitungan berikut: lebar_grid = 960 / 12 lebar_grid = 80 px

Jika ingin setiap kolom memiliki jarak 20 px kita dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah dari jarak yang diinginkan (10 px), seperti berikut: konten_grid = 80 - jarak = 80 - 20 = 60 px Sehingga ukuran margin kiri dan kanan dari elemen adalah: margin_kiri_kanan = jarak / 2 = 20 / 2 = 10 px

E. Latihan 1. Penggunaan Property Clear:Both

Sorce Code

CSS

body{ /*pengaturan body*/width: 960px; /*panjang body*/}header, nav, aside, section, footer{ /*pengaturan header, nav, aside, section, footer*/background: #14BCE6; /*pengaturan warna background*/border: 1px solid white; /*pengaturan garis tepi/border*/color: white; /*warna teks*/font-size: 2em; /*ukuran font yg digunakan*/font-variant: small-capps; /*untuk membuat huruf kapital*/text-align: center; /*posisi teks di tengah*/}header,nav,footer{ /*pengaturan header, nav, footer*/width: 100%; /*panjang header, nav, footer*/}header,footer{ /*pengaturan header dan footer*/height:100px; /*tinggi header dan footer disamakan*/} nav{ /*pengaturan menu navigasi*/height: 50px; /*tinggi menu navigasi*/}aside{ /*pengaturan sidebar atau float page*/float: left; /*posisi sidebar sebelah kiri*/height: 270px; /*tinggi sidebar*/width: 29.5%; /*panjang sidebar*/}section #content{ /*pengaturan section konten*/float: right; /*posisi section di sebelah kanan sidebar*/height: 250px; /*tinggi section konten*/width: 70%; /*panjang section konten*/}footer{ /*pengaturan footer*/clear: both; /*agar footer tepat berada di bawah elemen yang menggunakan property float*/}

HTML

<!DOCTYPE html><html> 

<head> <title>Layout Dasar Dokumen Web</title> <link rel="stylesheet"href="latihan1.css"> </head><body> <header>Header</header> <nav>Navigation</nav> <aside>SIDEBAR MENGGUNAKAN FLOAT :LEFT</aside> <section id="content"> 

<h3>MENGGUNAKAN FLOAT : RIGHT</h3>Alhamdulillah semuanya

sudahselesai, sehingga aku sangat-sangat lega dan sangat

senang.Apa kamu juga merasakan hal yang sama dengan aku?

</section><footer>Footer menggunakan clear : both</footer> </body>

</html>

Printscreen

Penjelasan

Pada Desain layout diatas menghasilkan bentuk layout dengan align kiri,

dengan menggunakan CSS dengan melakukan pengaturan pada style.css

sehingga terbentuk header navigation, sidebar dan footernya. Kemudian Pada

Index1.html melakukan pemanggilan dengan id atau class sesuai fungsinya.

Teknik clear:Both berfungsi agar ruas kiri dan kanan tidak bisa diisi oleh bidang

lain.

2.1. Latihan 2

Teknik Clear Fix

Source Code

CSS

*{ /*pengaturan keseluruhan*/margin: auto; /*margin menyesuaikan dengan nilai panjang dan tinggi*/}body{ /*pengaturan body*/width:960px; /*panjang body*/}header,nav,aside,section,footer{ /*pengaturan header,nav,aside,section,footer*/background: #14BCE6; /*pengaturan warna background*/border: 1px solid white; /*membuat garis tepi/border*/color: white; /*pengaturan warna teks*/font-size: 2em; /*pengaturan ukuran teks*/font-variant: small-capps; /*membuat huruf kapital*/text-align: center; /*posisi teks di tengah*/}header,nav,footer{ /*pengaturan header,nav dan footer*/width: 100%; /*panjang header,nav dan footer*/}header,footer{ /*pengaturan header dan footer*/height:100px; /*tinggi header dan footer*/}nav{ /*pengaturan menu navigasi*/height: 50px; /*tinggi menu navigasi*/}aside{ /*pengaturan sidebar/float page*/float: left; /*posisi sidebar sebelah kiri*/height: 250px; /*tinggi sidebar*/width: 29.5%; /*lebar sidebar*/}section#content{ /*pengaturan section*/float: right; /*posisi section di sebelah kanan sidebar*/height: 250px; /*tinggi section*/width: 70%; /*lebar section*/}.container{ /**/margin: 0; /**/padding: 0; /**/}.container: before, .container:after{ /**/content:""; /**/display:table; /**/}.container:after{ /**/clear:both; /**/}

footer{ /*pengaturan footer*/clear: both; /*agar footer tepat berada di bawah elemen yang menggunakan property float*/}

HTML

<!DOCTYPE html> <html> 

<head> <title>Layout Dasar Dokumen Web</title> <link rel="stylesheet"href="latihan2.css"> </head><body> <header>Header</header> <nav>Navigation</nav> <aside>Sidebar Menggunakan float:left</aside> <section id="content"> 

<h3>Menggunakan float:right</h3>Alhamdulillah semuanya

sudahselesai, sehingga aku sangat-sangat lega dan sangat

senang.Apa kamu juga merasakan hal yang sama dengan aku?

</section><footer>Footer menggunakan clear:both</footer> </body>

</html>

Printscreen

Penjelasan

Pada dasarnya pada program diatas menggunakan clear fix pada latihan 2 dan

teknik clear both pada latihan 1 memiliki perbedaan yaitu pada posisinya , pada

latihan satu berada pada sisi kiri windows sedangkan pada latihan 2 berada pada

sisi tengah. Sehingga clear fix memiliki fungsi untuk melakukan pergeseran

content agar sesuai dengan tampilan layar browser.

2.2. Latihan 3

Pembuatan Grid

Source Code

CSS

.col1, .col2, .col3, .col4,


.col9, .col10, .col11, .col12{ /*pengaturan kolom 1-12*/background: #CCC; /*warna background kolom*/display: block; /*menampilkan elemen dalam bentuk block*/float: left; /*posisi di sebelah kiri*/height: 30px; /*tinggi kolom*/line-height: 30px; /*mengatur tinggi antar baris paragraf*/margin: 0 10px 0 10px; /*mengatur seleksi batas jarak pada bagian luar elemen*/padding:0; /*mengatur seleksi batas jarak pada bagian dalam elemen*/text-align:center; /*posisi di tengah*/}.col1{ /*pengaturan kolom 1*/width: 60px; /*panjang kolom*/}.col2{ /*pengaturan kolom 1*/width: 140px; /*panjang kolom*/}.col3{ /*pengaturan kolom 1*/width: 220px; /*panjang kolom*/}.col4{ /*pengaturan kolom 1*/width:300px; /*panjang kolom*/}.col5{ /*pengaturan kolom 1*/width: 380px; /*panjang kolom*/}.col6{ /*pengaturan kolom 1*/width: 460px; /*panjang kolom*/}.col7{ /*pengaturan kolom 1*/width: 540px; /*panjang kolom*/}.col8{ /*pengaturan kolom 1*/width: 620px; /*panjang kolom*/}.col9{ /*pengaturan kolom 1*/width: 700px; /*panjang kolom*/}.col10{ /*pengaturan kolom 1*/width: 780px; /*panjang kolom*/}.col11{ /*pengaturan kolom 1*/width:860px; /*panjang kolom*/

}.col12{ /*pengaturan kolom 1*/width:940px; /*panjang kolom*/}.container{ /*pengaturan container*/background: #555; /*pengaturan warna background*/margin: 0; /*mengatur seleksi batas jarak elemen dari luar*/padding: 0; /*mengatur seleksi batas jarak elemen dari dalam*/width: 960px; /*panjang container*/}.container:before,.container:after,.row:before,.row:after{content:"";display:table;}.container:after,.row:after{clear:both;}.row{clear:both;margin:10px 0 10px 0;}

HTML

<!DOCTYPE html> <html> 

<head> <title>Contoh Grid pada HTML</title> <link rel="stylesheet" href="latihan3.css"> </head>

<body> <div class="container"> <div class="row"> <div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div>

</div>

<div class="row"> 

<div class="col2">2</div>



</div>


<div class="col12">12</div></div>

</div></body>

</html>

Printscreen

Penjelasan

Pada code program diatas membentuk Grid pertama dengan melakukan

bentuka col1-col12 pada css dan pengaturan posisi conten serta floatingnya juga

serta row tablenya, pada col1-col12 diberi width dengan kelipatan 80 sehingga

membentuk panjang grid yang berbeda-beda. Kemudian pada Grid_Style.html

Tinggal kita panggil Css yaitu 3.css.css dengan pengaturan pada pemanggilan col

di Css sehingga membentuk seperti pada printscreen.

F. Studi Kasus

Buatlah sebuah website pribadi anda yang berisi:

a. Halaman beranda

b. Halaman informasi mengenai diri anda

c. Halaman sebuah artikel(sertakan sumber referensi artikel)

File .html

1. Home


<head> <link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">

<title>Home-Gisra Rahmadhita</title> 

<link rel="stylesheet" href="webPribadi.css"> 

</head>



selection pada dokumen--><div class="col1"><br>Gisra Rahmadhita</div>

</div>


<div class="col2"><a href="Home.html">Home</a></div>

<div class="col2"><a href="Profil.html">Profil</a></div>

<div class="col2"><a href="Artikel.html">Artikel</a></div>

</div>


<div class="col3"><a

href="http://tekno.kompas.com/read/2014/03/03/1836321/Bicara.Soal.Smartphone.Mari.Bicara.Soal.Samsung.Galaxy.S5">

Bicara samsung galaxy S5 </a><br><a

href="http://tekno.kompas.com/read/2014/03/03/1102341/Sejarah.Kelahiran.Android.Nokia.X">

Android Nokia </a><br><a

href="http://tekno.kompas.com/read/2014/02/21/0950207/CEO.WhatsApp.dari.Tukang.Sapu.Jadi.Miliarder">

CEO WhatsApp Mantan Tukang Sapu </a><br><a

href="http://tekno.kompas.com/read/2014/02/13/1636099/Seperti.Inikah.Wujud.iPhone.6.">

Wujud iPhone 6 </a><br></div><div class="col4"><font ><h1>STUDI KASUS</h1><h2>Prak. Pemrograman Berbasis Web</h2><h3>MODUL III</h3></font></div>

</div>

<div class="col6"><br>@2015 Created By : Gisra Rahmadhita</div>

</div></div>

</body></html>

2. Profil



<title>Profil-Gisra Rahmadhita</title> 


</head>




</div>





</div>


<div class="col3"><img src ="PhotoGrid_1423392059517.jpg"></div><div class="col4"><p><h2>Nama : Gisra Rahmadhita</br>

NIM : 130533608259</br> TTL : Padang, 21 Agustus 1994</br>

Alamat : Komp.Villa Permata Putri

Edelwis No.11 Tanah Sirah </br> Prodi : S1 PTI 2013 Off. B </br> No. Hp : 085791929285 </br> <ol>

Riwayat Pendidikan : </br> 

<li>SDN 27 Sawahan Dalam (2001-2007) </li> 

<li>SMPN 09 Padang (2007-2010) </li> 

<li>SMA Semen Padang (2010-2013) </li> 

<li>Universitas Negeri Malang (2013-sekarang) </li> 

</h2></p></div>

</div><div class="row"> <div class="col6"><br>@2015 Created By :

Gisra Rahmadhita</div></div>

</div></body>

</html>

3. Artikel



<title>Artikel-Gisra Rahmadhita</title> 


</head>




</div>





</div>


<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br>

<a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>Bicara Soal Smartphone, <br>Mari Bicara

Soal Samsung Galaxy S5</h1><br><img src="S5.jpg"><br>Kemajuan dunia teknologi telekomunikasi bukan

hanya memberikan arti baru, tetapi juga dapat meningkatkan kualitas hidup

seseorang.Kualitas hidup yang lebih baik bukan hanya

diukur dari kemapanan seseorang dalam soal finansial. Karena, kemapanan seseorang dari segi

finansial tersebut tidak akan lepas dari aktivitasnya dan untuk memenuhi setiap aktivitas tersebut

butuh sebuah dukungan. Misalnya saja, saat membutuhkan dukungan

koneksi yang cepat agar setiap pekerjaan dapat terselesaikan atau dukungan yang berhubungan dengan

kesehatan untuk menunjang aktivitas di atas. Aktivitas yang lancar tersebut secara

otomatis akan meningkatkan kemapanan finansial dan berlanjut dengan meningkatnya gaya hidup.

Dukungan tersebut bisa didapatkan dari mana saja, contohnya sebuah smartphone.Kemajuan teknologi komunikasi yang ada saat

ini membuat ponsel memang layak disebut sebagai smartphone. Selain fungsi utamanya sebagai sebuah alat

berkomunikasi, sebuah smartphone pantas juga disebut sebagai

"pendukung utama" Anda beraktivitas. Contohnya saja apa yang dilakukan oleh

perusahaan asal negeri ginseng yang baru saja merilis Samsung Galaxy S5 di

Barcelona, Spanyol.Seorang JK Shin, President and Head of IT &

Mobile Communications Divison Samsung membuka sebuah tabir apa yang dibutuhkan oleh

konsumen dari sebuah smartphone. "Konsumen mencari sebuah perangkat mobile

yang mampu menginspirasi dan mendukung aktivitas mereka bersamaan dengan usaha mereka meningkatkan

gaya hidup. GALAXY S5 mencerminkan sebuah produk

berdesain ikonik dengan fitur penting dan berguna yang fokus dalam menghadirkan smartphone

canggih di pasaran saat ini yang di inspirasi dari konsumen.”<h2>Terinspirasi dari kebutuhan

konsumen.</h2>Konsumen, adalah inspirasi yang menyebabkan

Samsung Galaxy S5 mampu menghadirkan kecanggihan sebagai sebuah smartphone.

Spesifiaksinya menyebutkan kalau smartphone ini sudah dapat bekerja dalam jaringan LTE Cat.4

yang mampu mengaliri data hingga 150/50Mbps. Jadi, kecepatan data saat sedang berselancar

di dunia maya berjalan mulus tanpa putus.

Pada Samsung Galaxy S5 pun sudah didukung oleh Wi-Fi generasi ke lima 802.11ac dan MIMO 2x2,

sehingga saat mencari koneksi yang cepat Samsung Galaxy S5 ini sudah siap mendukung Anda

ditambah lagi dengan fitur Download Booster sebuah teknologi Wi-Fi inovatif untuk meningkatkan kecepatan data

dengan menggunakan Wi-Fi dan LTE secara bersamaan.

Agar kecepatan jaringan di atas dapat difasilitasi,

perangkat Samsung Galaxy S5 pun sudah siap dijalankan oleh sebuah prosesor berkekuatan 2.5GHz Quadcore

dan memori sebesar 2GB agar setiap akses yang Anda lakukan di smartphone tersebut dapat berjalan dengan lancar tanpa tersendat.

Dan untuk masalah penyimpanan Samsung Galaxy S5 ini tanpa tambahan kartu penyimpanan sudah dapat menyimpan data

yang Anda punya berkat Internal Memory 16/32GB. Sehingga, semua foto yang Anda ambil dari kamera 16MP (depan) atau 2.1MP (belakang)

Samsung Galaxy S5 sudah langsung dapat tersimpan.

Saat menangkap momen berharga bersama keluarga atau sahabat ke dalam foto,

Anda pun dapat merasakan pengalaman kecanggihan High Dynamic Range (HDR) yang mampu mereproduksi cahaya dan warna mencolok

dengan intensitas tinggi dalam kondisi apapun, dan kecepatan autofocus dari kamera Samsung Galaxy S5 ini

yang mampu menangkap objek hanya dalam 0.3 detik. Hal lainnya adalah,

Samsung Galaxy S5 akan menjadikan Anda bak fotografer profesional

dengan fitur Selective Focus yaitu foto dengan bagian tajam di satu obyek saja.

Jadi, untuk menciptakan efek a shallow depth of field (DOF)cukup tekan saja.

Lain lagi apabila Anda ingin merekam momen di atas dalam bentuk video.

Anda dapat menciptakan video dengan resolusi tinggi dengan kecepatan UHD@30fps

dan urusan gambar yang goyang dapat diminimalisir dengan video stabilization.

Setiap video yang Anda buat bisa dibentuk dalam format MP4, M4V, 3GP, 3G2, WMV, ASF, AVI, FLV, MKV, WEBM.

Atau Anda pun dapat menyaksikan video bersama dari layar Samsung Galaxy S5 yang berukuran 5.1” FHD Super AMOLED (1920 x 1080),

asalkan video tersebut ada dalam format H.263, H.264(AVC), MPEG4, VC-1, Sorenson Spark, MP43, WMV7, WMV8, VP8.

<h2>Menjadikan Samsung Galaxy S5 bagian dari gaya hidup</h2>

Sebagai perusahaan gadget terbesar, Samsung selain dapat menciptakan perangkat canggih dan sesuai kebutuhan konsumen

juga tidak pernah lupa melekatkan nilai estetika dari setiap produknya.

Jelasnya, terlihat dari Samsung Galaxy S5 ini yang ikonik dengan tren modern untuk menarik selera konsumen yang berbeda-beda.

GALAXY S5 memiliki pola dengan ilusi lubang di cover belakang yang membuatnya terlihat glamor dan modern.

Terlihat ramping, dengan bentuk kontur yang baru dan warna-warna yang lebih hidup, seperti charcoal Black,

shimmery White, electric Blue dan copper Gold.

Agar Samsung Galaxy S5 ini tetap terlihat "cantik" tak lupa Samsung pun memberikan pertahanan dari debu dan air pada bagian luar produk ini.

Sedangkan untuk bagian keamanan smartphone ini dapat membaca sidk jari Anda dengan fitur finger scanner atau

Anda dapat melakukan penguncian layar biometrik. Untuk masalah ketahanan baterai,

Samsung Galaxy S5 ini dilengkapi dengan baterai berkekuatan 2800mAh (Standby time: 390 hrs / Talk time: 21 hrs)

dan dilengkapi pula dengan The Ultra Power Saving Mode yang akan merubah layar menjadi hitam putih

dan menutup semua fitur yang tidak perlu agar konsumsi baterai lebih hemat.

<h2>Samsung Galaxy S5 dan Kesehatan</h2>Nah ini yang unik, setiap pengguna Samsung

Galaxy S5 akan dimanjakan oleh S Health 3.0 yaitu aplikasi yang akan membantu Anda tetap

fit dan sehat. Samsung Galaxy S5 menyediakan fitness tracker personal yang komprehensif untuk membantu pengguna

memantau dan menjaga aktivitas keseharian mereka juga Samsung Galaxy S5

ini dilengkapi dengan perangkat tambahan termasuk pedometer, catatan diet dan aktivitas olahraga, serta satu perangkat

terbaru yakni built-in monitor denyut jantung. Samsung Galaxy S5 ini juga dapat disandingkan dengan Samsung Gear terbaru

agar dapat mendampingi kegiatan kebugaran secara real-time.</div>




</div></body>

</html>

Artikel2

<!DOCTYPE html> <html> <head> <link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">


<link rel="stylesheet" href="webPribadi.css"> </head>

<body>

<div class="container"> 


<div class="col1"><br>Gisra Rahmadhita</div></div>





</div>


<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br><a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>Sejarah Kelahiran Android Nokia X</h1><br><img src="Nokia-X.jpg"><br>KOMPAS.com — Nokia sudah menaruh perhatian pada

Android sejak tiga tahun lalu. Namun, Nokia malu-malu mengadopsi Android karena

telanjur menjalin kemitraan eksklusif dengan Windows Phone. Sebagai jalan tengah dan agar terlihat tidak

bergantung sepenuhnya pada Google, Nokia melakukan modifikasi besar pada sistem robot

hijau hingga terciptalah Android rasa Windows Phone.Eksperimen Nokia terhadap Android sudah dimulai

sejak 2011. Tanda-tanda itu terlihat ketika beredar foto ponsel

Nokia N9 yang menjalankan Android 2.3. Foto ini diyakini bukan rekayasa.Nokia menjadi "pengagum rahasia" sistem operasi

Android. Bahkan, CEO Nokia Stephen Elop dibuat galau. Ia mempertimbangkan agar Nokia mengadopsi Android

demi menyelamatkan bisnis ponselnya yang sedang terpuruk. Terlebih lagi, pertumbuhan pengguna Android sangat

pesat serta mendapat banyak dukungan dari pengembang aplikasi.Sekitar akhir tahun 2013, seorang sumber tepercaya

mengatakan kepada KompasTekno bahwa Nokia memang serius menggarap Android.

Namun, sumber itu mengatakan, Android yang dikembangkan Nokia ini lain daripada yang lain.

Kepala Desain User Interface Nokia saat itu, Peter Skillman,

disebut-sebut sebagai orang yang berperan besar dalam pengembangan Android di Nokia.

Selain Skillman, ada Egil Kvaleberg yang memimpin penelitian dan pengembangan, desain sistem, dan arsitektur ponsel Android Nokia

Beberapa pekan kemudian, beredar kabar Nokia sedang mengerjakan proyek yang disebut "Asha on Linux".

Dengan status super-rahasia, Nokia memproduksi 10.000 unit perangkat purwarupa yang secara fisik mirip ponsel seri Asha

tetapi menjalankan Android. Perangkat ini diproduksi oleh pemanufaktur Foxconn di China

dan menggunakan prosesor Qualcomm Snapdragon 200 seri 8225Q.

Karyawan Nokia menyebut perangkat itu dengan kode nama "Normandy."

Ini hanyalah sebuah kode nama, bukan merek dagang ataupun nama resmi untuk dipasarkan.

Hingga pada Januari 2014, beredar kabar bahwa ponsel pintar Android itu diberi nama resmi Nokia X.

Ini bukan seperti Android yang diadopsi oleh Samsung, Sony, HTC, dan produsen ponsel lainnya.

Proyek ini hanya memanfaatkan sistem operasi Android yang bersifat open source (terbuka)

tetapi tidak menyertakan layanan atau aplikasi Google.

Sejak awal, KompasTekno meyakini bahwa Android yang dikembangkan Nokia mirip seperti sistem pada tablet Kindle Fire buatan Amazon.

Perusahaan e-commerce asal Amerika Serikat itu tidak memungkinkan pengguna Kindle Fire untuk mengunjungi Google Play Store,

atau berselancar internet dengan Chrome, atau memakai aplikasi asli Gmail.

Pengembangan Android terus berlanjut meskipun unit bisnis ponsel Nokia dibeli oleh Microsoft pada September 2013.

The Verge melaporkan, Microsoft terkesan "tidak suka" dengan proyek Android yang dijalani Nokia.

"Ada terlalu banyak intrik politik" dengan keputusan Nokia mengadopsi Android.

Peluncuran Android Nokia bahkan dikabarkan terancam batal.

Di sisi lain, beberapa petinggi Microsoft menilai ponsel Android dari Nokia dapat menjadi kuda troya untuk meningkatkan adopsi Windows Phone.

<h2>Bocoran informasi dari Kemenkominfo</h2>Kode teknis perangkat Android buatan Nokia

terungkap berkat situs web Dirjen Sumber Daya dan Perangkat Pos dan Informatika (SPPI)

Kementerian Komunikasi dan Informatika. Pada 24 Januari 2014,

KompasTekno melaporkan ada pengajuan sertifikasi ponsel baru dengan kode teknis RM-980 kepada Pemerintah Indonesia.

Ponsel itu dirakit di China.Kemenkominfo akhirnya memberi sertifikasi kepada

RM-980. Indonesia merupakan salah satu negara tujuan utama

penjualan ponsel Android Nokia yang mengincar sejumlah negara berkembang.

Bocoran informasi terus menerpa. Akun Twitter @evleaks memublikasi foto ponsel Nokia X berwarna hijau.

Setelah itu, bermunculanlah foto Nokia X yang ternyata menyediakan beragam warna casing.

Bukan sekadar foto, spesifikasi komponen yang dipakai Nokia X juga tersiar.

Prosesor yang digunakan pada Nokia X dibuat oleh Qualcomm, kapasitas RAM 512 MB, memori internal 4 GB,

layar 4 inci resolusi 800 x 480 piksel, kamera 5 MP, mendukung kartu SIM ganda, baterai 1.500 mAh,

dan berjalan dengan basis sistem operasi Android 4.4 (KitKat).

Dari sekian banyak bocoran spesifikasi tersebut, hanya ada satu yang salah, yaitu versi Android yang digunakan.

Ternyata, Nokia X menggunakan basis sistem operasi Android versi 4.1.2 (Jelly Bean).

Hingga pada Februari 2014, Nokia mengirim udangan kepada media massa untuk

sebuah acara di ajang Mobile World Congress (MWC) tanggal 24 Februari 2014 di Barcelona, Spanyol.

Benar saja, CEO Nokia Stephen Elop memperkenalkan Nokia X.

Ada tiga varian yang diperkenalkan Elop saat itu, yaitu Nokia X, Nokia X+, dan Nokia XL.

Nokia X+ dan XL memiliki kapasitas RAM yang lebih besar, yaitu 768 MB. Khusus Nokia XL, terdapat sejumlah peningkatan spesifikasi.

Kamera belakangnya dilengkapi lampu kilat LED, tersedia juga kamera depan, layar berukuran 5 inci, serta baterai berkapasitas 2.000 mAh.

<h2>Semua rahasia Android Nokia X terungkap</h2>Dalam mengembangkan dan menggunakan Android, Nokia

hanya memakai lisensi "Android Open Source Project" (AOSP) dari Google.

Pada lisensi ini, Google mengizinkan siapa saja untuk memanfaatkan Android secara gratis.

Google telah memantapkan komitmen bahwa Android adalah sistem operasi yang bersifat open source atau terbuka.

Sementara itu, Nokia tidak membeli lisensi Google Mobile Service (GMS) dari Google.

Hal inilah yang menyebabkan Nokia X tidak menyediakan secara langsung aplikasi inti Android,

seperti aplikasi asli Gmail, Google Maps, Chrome, YouTube, Hangouts, Google+, Google Drive, dan Google Search.

Bahkan, sistem Nokia X tidak mendukung antarmuka pemrograman aplikasi (application programming interface/API) buatan Google.

Nokia meminta aplikasi-aplikasi Android yang memanfaatkan API Google agar dimodikasi dan menggunakan API buatan Nokia.

Dugaan KompasTekno bahwa sistem Nokia X sama seperti Kindle Fire ternyata benar.

Nokia X tidak memungkinkan penggunanya mengunjungi toko aplikasi Google Play Store.

Sebagai gantinya, Nokia menyediakan toko aplikasinya sendiri, yaitu Nokia Store,

yang merupakan pintu utama untuk mencari, mengunduh, dan memasang aplikasi Android di Nokia X.

Basis Android yang dipakai pada Nokia X saat ini adalah versi 4.1.2 (Jelly Bean) dan disebut sebagai "Nokia X software platform".

Perusahaan asal Finlandia itu melakukan banyak modifikasi pada Android,

termasuk mengubah agar tampilan Nokia X terlihat seperti Windows Phone dengan nuansa kotak-kotak.

Inilah strategi Nokia dalam menyikapi Android. Keberadaan Nokia X menegaskan bahwa Nokia tak mau bergantung pada Google.

Mereka memilih untuk membangun ekosistem sendiri dan menciptakan pasar baru, sambil berharap cemas Nokia X mampu meraih sukses di pasar.

Dalam waktu dekat, Nokia akan mulai memasarkan si ponsel Android rasa windows Phone yang anti-terhadap layanan atau aplikasi buatan Google ini.

<br></div></div><div class="row"> <div class="col6"><br>@2015 Created By : Gisra

Rahmadhita</div></div>

</div></body></html>

Artikel3





</head>




</div>





</div>


<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br>

<a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>CEO WhatsApp, dari Tukang Sapu Jadi

Miliarder</h1><br><img src="CEO-WhatApps.jpg"><br>KOMPAS.com — Pada 1992, Jan Koum yang berusia

16 tahun tiba di Mountain View, Amerika Serikat. Didampingi oleh ibunya, Koum adalah imigran

yang memutuskan hijrah dari Kiev, Ukraina, dengan mimpi meraih kehidupan yang lebih baik.

Di AS, mereka mengalami masa-masa sulit. Keluarga Koum tinggal di apartemen kecil dengan dua kamar tidur hasil bantuan pemerintah.

Mereka terpaksa bergantung pada jaminan sosial dan mengantre kupon makanan karena tak punya uang.

Koum pun bekerja sebagai tukang sapu di sebuah toko untuk memenuhi kebutuhan hidup,

sementara ibunya mengambil profesi baru sebagai baby sitter.

Ayah Koum tak ikut bermigrasi. Pria yang bekerja di sektor konstruksi ini memilih tinggal di Ukraina.

Begitu terpisah, Koum mengaku tak bisa sering-sering menghubungi sang ayah karena mahalnya biaya telepon.

"Jika saja ketika itu saya sudah bisa berkirim pesan instan ke ayah…" ujar Koum berandai-andai dalam wawancara dengan Wired.

<h2>Bersekolah</h2>Saat masih tinggal di Ukraina, keluarga Koum

hidup di sebuah desa di luar ibu kota Kiev. Dia pergi menuntut ilmu di sebuah sekolah

yang keadaannya begitu memprihatinkan sampai-sampai tak punya kamar kecil.

"Bayangkan suhu di luar minus 20 derajat celsius, anak-anak harus berlari menyeberangi lapangan untuk ke kamar kecil…

Saya baru punya komputer saat umur 19 tahun, tetapi pernah memiliki sempoa," kenang Koum.

Sesampainya di rumah, Koum kecil terpaksa bergelap-gelap karena tak ada sambungan listrik ataupun air panas.

Begitu pindah ke Amerika dan mulai bersekolah di sana, keluarga Koum adalah satu-satunya di kelas yang tidak memiliki mobil.

Jadilah Koum terpaksa bangun lebih pagi untuk mengejar bus.

Sang ibu menjejali koper yang dibawa dari negeri asal dengan pulpen dan buku tulis cetakan Uni Soviet untuk menghemat biaya peralatan sekolah.

Datang dari negeri seberang, Koum ketika itu tak pandai berbahasa Inggris.

Koum beberapa kali terlibat masalah karena "membalas anak lain yang mengganggu".

Untung, dia terbantu dengan postur badan yang tinggi menjulang mencapai 188 cm.

"Hidup di Ukraina tak mudah dan membuat saya tangguh secara fisik dan mental," katanya lagi.

Koum kemudian masuk kuliah, mempelajari ilmu komputer dan matematika, tetapi tidak sampai selesai.

"Prestasi saya buruk, ditambah lagi dengan rasa bosan."

Maka, dia pun memutuskan drop out, lalu mulai bekerja sebagai pembungkus barang belanjaan di supermarket,

setelah itu di toko elektronik, internet provider, hingga perusahaan audit.

Sampai kemudian pada 1997 Koum bertemu dengan Brian Acton dari Yahoo. Enam bulan setelahnya, Koum mulai bekerja di Yahoo.

<h2>Mendirikan WhatsApp</h2>Koum menjalin persahabatan dengan Acton, yang

banyak membantu Koum ketika sempat hidup sebatang kara setelah ibunya meninggal pada tahun 2000.

Sang ayah telah lebih dulu wafat pada 1997. "Dia (Acton) sering mengajak saya ke rumahnya," tutur Koum.

Menghabiskan sembilan tahun bekerja di Yahoo, termasuk Yahoo Shopping,

Koum merasa tidak nyaman dengan banyaknya iklan yang harus diurus dan bertebaran di mana-mana.

"Selalu ada perdebatan untuk menempatkan lebih banyak lagi iklan dan logo di laman situs.

Apa urusan pengguna dengan itu semua? Saya jadi tak nyaman. Iklan bukan satu-satunya solusi monetisasi untuk semua orang.

Sebuah layanan harus benar-benar berupa layanan murni, pelanggan adalah pengguna," ujar Koum.

Acton rupanya merasakan hal serupa. Koum dan Acton kemudian memutuskan keluar dari Yahoo pada hari yang sama,

yaitu 31 Oktober 2007. Koum ketika itu berusia 31 tahun dan telah mengumpulkan uang untuk memulai bisnisnya sendiri.

Dia bertekad bahwa bisnisnya ini tak akan direcoki oleh iklan yang mengganggu.

Koum dan Acton pisah jalan, tetapi masih sering bertemu untuk mendiskusikan rencana bisnis.

Keduanya sempat mencoba melamar di Facebook dan sama-sama ditolak.

Pada 2009, setelah membeli sebuah iPhone, Koum menyadari bahwa toko aplikasi App Store yang baru berumur tujuh bulan

akan melahirkan industri baru yang berisi pengembang-pengembang aplikasi.

Koum mendapat ide untuk membuat aplikasi yang bisa menampilkan update status seseorang di daftar kontak ponsel,

misalnya ketika hampir kehabisan baterai atau sedang sibuk.

Nama yang muncul di benak Koum adalah "WhatsApp" karena terdengar mirip dengan kalimat "what's up" yang biasa dipakai untuk menanyakan kabar.

Dia pun mewujudkan ide ini dengan dibantu oleh Alex Fishman, seorang teman asal Rusia yang dekat dengan komunitas Rusia di kota San Jose.

Pada 24 Februari 2009, dia mendirikan perusahaan WhatsApp Inc di California.

<h2>Tumbuh besar</h2>WhatsApp versi pertama benar-benar dipakai

sekadar untuk update status di ponsel.

Pemakainya kebanyakan hanya teman-teman Koum dari Rusia. "Lalu, pada suatu ketika, ia berubah fungsi jadi aplikasi pesan instan.

Kami mulai memakainya untuk menanyakan kabar masing-masing dan menjawabnya," ucap Fishman, sebagaimana dikutip oleh Forbes.

Koum pun tersadar bahwa dia secara tak sengaja telah menciptakan layanan pengiriman pesan.

"Bisa berkirim pesan ke orang di belahan dunia lain secara instan, dengan perangkat yang selalu Anda bawa,

adalah hal yang luar biasa," kata Koum.Ketika itu, satu-satunya layanan messaging

gratis lain yang tersedia adalah BlackBerry Messenger. Namun, aplikasi ini hanya bisa digunakan di

ponsel BlackBerry. Google G-Talk dan Skype juga ada, tetapi WhatsApp menawarkan keunikan

tersendiri di mana mekanisme login dilakukan melalui nomor ponsel pengguna.

Koum merilis WhatsApp versi 2.0 dengan komponen messaging.

Jumlah pengguna aktifnya langsung melonjak jadi 250.000 orang. Dia kemudian menemui Acton yang masih menganggur.

Acton bargabung dengan WhatsApp dan membantu mencarikan modal dari teman-teman eks-Yahoo.

Kendati sempat mengalami kesulitan keuangan, WhatsApp terus tumbuh dan mulai menghasilkan pendapatan

dari biaya langganan yang ditarik dari pengguna.

Kini, WhatsApp telah menjelma jadi layanan pesan instan terbesar dengan jumlah pengguna aktif per bulan mencapai 450 juta.

Setiap hari, sebanyak 18 miliar pesan dikirim melalui jaringannya. Semua itu ditangani dengan jumlah karyawan hanya 50 orang.

<h2>Warisan Soviet</h2>Pengalaman hidup Koum ternyata punya pengaruh

besar dalam membentuk layanan WhatsApp. Pria ini menghabiskan masa kecil di Ukraina

yang masih menjadi bagian dari Uni Soviet. Di negeri tersebut, percakapan warga selalu

dimata-matai oleh pemerintah. "Itulah tempat yang saya tinggalkan untuk

menuju ke sini (AS), di mana ada demokrasi dan kebebasan berbicara," ujar Koum.

Sehubungan dengan kemungkinan penyadapan oleh NSA, Koum mengatakan bahwa privasi pengguna WhatsApp sangat dijaga.

Berbeda dengan perusahaan-perusahaan semacam Facebook dan Yahoo, Koum mengatakan bahwa WhatsApp tak didorong oleh iklan.

"Jadi, kami tak perlu mengumpulkan data pribadi pengguna," katanya.

Soal kebebasan dari iklan ini ternyata juga ada hubungannya dengan masa lalu Koum.

"Tak ada yang lebih personal dari komunikasi yang Anda lakukan dengan teman dan keluarga,

dan menginterupsi itu semua dengan iklan bukanlah solusi yang tepat," ujar Koum.

"Lagi pula, saya tumbuh di sebuah dunia yang tidak mengenal iklan. Tak ada iklan di Uni Soviet yang komunis," imbuhnya.

Sejak dulu, Koum dan Acton selalu konsisten menjaga layanan perusahaan itu agar tetap sederhana

dan berfokus pada pengiriman pesan serta bebas iklan.

Sikap ini tecermin dari secarik kertas di ruang kantor Koum, berisikan semboyan singkat yang ditulis oleh Acton:

"Tanpa Iklan! Tanpa Permainan! Tanpa Gimmick!". Di sampingnya tergeletak sepasang walkie-talkie yang dipakai Koum

untuk mencari tahu bagaimana caranya menyederhanakan pesan instan berbasis suara.

Kini, WhatsApp telah dibeli Facebook dengan nilai 19 miliar dollar AS (sekitar Rp 223 miliar).

Kekayaan Koum yang memiliki 45 persen saham WhatsApp diperkirakan melonjak jadi 6,8 miliar dollar AS.

Kendati demikian, dia tak melupakan masa lalu.

Koum menandatangani perjanjian bernilai triliunan rupiah dengan Facebook itu di depan bekas kantor Dinas Sosial North County,

Mountain View, tempat dia dulu mengantre kupon makanan bersama-sama warga kurang mampu lainnya.</div>




</div></body>

</html>

Artikel4





</head>




</div>





</div>


<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br><a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>Seperti Inikah Wujud iPhone 6? </h1><br><img src="iPhone1.jpg"><br>KOMPAS.com — Bocoran informasi mengenai

iPhone generasi terbaru memang selalu menarik perhatian. Banyak yang ingin mengetahui, akan seperti

apakah inovasi yang dihadirkan oleh Apple nantinya.Bocoran terbaru memperlihatkan beberapa

gambar casing milik perangkat yang diduga sebagai iPhone 6. (lihat gambar di bawah)<img src="iPhone2.jpg"><h6>Casing ini diduga milik iPhone 6</h6>Gambar-gambar tersebut dikutip oleh Sonny

Dickson dalam akun Twitter-nya. Akun ini sudah beberapa kali membocorkan

informasi produk yang bahkan belum diumumkan secara resmi.Menurut pengamatan KompasTekno, gambar-gambar

yang dipamerkan memang tidak terlihat terlalu jelas, cenderung sedikit berbayang. Untungnya,

beberapa detail dari casing ini masih bisa sedikit terlihat.<img src="iPhone3.jpg"><h6>Bagian belakang cangkang produk yang

diduga sebagai iPhone 6</h6>Berdasarkan gambar tersebut, seperti dikutip

dari Pocket-Lint, Kamis (13/2/2014), iPhone 6 terlihat lebih langsing atau lebih

tipis dibandingkan iPhone generasi sebelumnya. Desain perangkat ini mirip, alias tidak jauh

berbeda, dari iPad Mini dan iPad Air.Layarnya pun tampak lebih besar ketimbang

iPhone 5S. Hal tersebut sejalan dengan rumor yang

berkembang selama ini. Beberapa kali, media besar mengungkapkan

bahwa iPhone generasi berikutnya akan dipersenjatai dengan layar berukuran 4,7 dan 5,5 inci.

Sekadar catatan, Apple sendiri gemar melakukan pengujian perangkat dalam berbagai bentuk purwarupa.

Ada kemungkinan, foto yang dipamerkan oleh Dickson merupakan salah satu dari purwarupa tersebut.

Masih ada kemungkinan bahwa iPhone 6 memiliki bentuk yang berbeda dari yang dibagikan oleh Dickson.

Adapun iPhone 6 digosipkan akan diperkenalkan pada Mei 2014 mendatang. </div>




</div></body>

</html>

File .css


.col5, .col6, .col7{ /*pengaturan kolom 1-12*/background: #afeeee; /*warna background kolom*/display: block; /*menampilkan elemen dalam bentuk block*/float: left; /*posisi di sebelah kiri*/height: 30px; /*tinggi kolom*/line-height: 30px; /*mengatur tinggi antar baris paragraf*/margin: 0 10px 0 10px; /*mengatur seleksi batas jarak pada bagian luar elemen*/padding:0; /*mengatur seleksi batas jarak pada bagian dalam elemen*/text-align:center; /*posisi di tengah*/}.col1{ /*pengaturan kolom 1*/width: 940px; /*panjang kolom*/height: 80px;font-family: facebook latter faces;text-align: right;font-variant: small-caps;font-size: 40px;font-weight: bold;background-image: url('D.jpg'); /*pengaturan warna background*/color: red;}.col2{ /*pengaturan kolom 1*/width: 300px; /*panjang kolom*/}.col3{ /*pengaturan kolom 1*/width: 300px; /*panjang kolom*/height: auto;}.col4{ /*pengaturan kolom 1*/width:620px; /*panjang kolom*/height: auto;}.col5{ /*pengaturan kolom 1*/width: 300px; /*panjang kolom*/height: 80px;}.col6{width: 940px;height: 80px;}.col7{width: 280px;height: 40px;border: 1px solid white;padding: 0px;margin: 0 0px 5 0px;

}.container{ /*pengaturan container*/background-image: url('C.jpg'); /*pengaturan warna background*/margin: 0 200px 0 200px; /*mengatur seleksi batas jarak elemen dari luar*/padding: 0; /*mengatur seleksi batas jarak elemen dari dalam*/width: 960px; /*panjang container*/}.container:before,.container:after,.row:before,.row:after{content:"";display:table;}.container:after,.row:after{clear:both;}.row{clear:both;margin:10px 0 10px 0;}

Hasil

Penjelasan :

Tampilan web di atas merupakan sebuah website pribadi yang berisi Home, Profil dan

Artikel. Setiap menu memiliki link untuk menuju halaman yang berbeda. Desain di atas

menggunakan grid. Memilik 2 konten area disetiap halamannya. Konten kiri berisi 4 link

menuju website lain, konten kanan merupakan konten utama. Halaman home berisi judul

dan 4 link menuju halaman web lain. Halaman profil berisi identitas dan foto. Halaman

artikel berisi 4 artikel menarik tentang perkembangan gadget, dan halaman artikel ini juga

berisi 4 link artikel (4 macam artikel).

G. KESIMPULAN

1. Property float berfungsi “mengapungkan” elemen. Sehingga elemen tersebut

akan berpindah sesuai isi dari property float. Permasalahan yang muncul adalah float

merusak alur dari halaman. Ketika menggunakan properti float, elemen-elemen lain

akan menjadi mengikuti aturan kiri atau kanan dari float. Salah satu cara umum

yang dilakukan untuk mengatasi permasalahan float adalah penggunaan

clear:both;.

2. Permasalahan lain muncul setelah penggunaan style clear:both; . Jika kita tidak

mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka style

clear:both tidak akan dapat bekerja dengan baik. Metode lain untuk

membersihkan float ialah dengan menggunakan teknik “clear fix”.

3. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan

menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama

“Grid” pada dunia web. Sebagai garis pembantu dalam menyusun elemen, Grid

dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan

elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian

Grid umumnya dilakukan untuk menyusun elemen secara merata.

H. Daftar Pustaka

Sidik, Betha. 2012. Pemrograman Web dengan HTML revisi keempat.

Bandung:Informatika.

Modul Pratikum Pemrograman Berbasis Web 3 Desain Web (Layout dan Menu).

2015. Pendidikan Teknik Informatika. Universitas Negeri Malang

http://rumahdot.com/web-programming/mengenal-elemen-elemen-html5-yang-

sering-digunakan/ (diakses tanggal 28 Februari 2014)

http://tokotuaforex.blogspot.com/2012/10/struktur-baru-html-5.html (diakses

tanggal 28 Februari 2014)

http://blogedek.blogspot.com/2012/01/perintah-dan-fungsi-tag-pada-html.html

(diakses tanggal 28 Februari 2014)

http://blogedek.blogspot.com/2012/01/perintah-dan-fungsi-tag-pada-html.html

http://tokotuaforex.blogspot.com/2012/10/struktur-baru-html-5.html

http://rumahdot.com/web-programming/mengenal-elemen-elemen-html5-yang-sering-digunakan/

http://rumahdot.com/web-programming/mengenal-elemen-elemen-html5-yang-sering-digunakan/

laporan pratikum iii web

Data & Analytics