SlideShare a Scribd company logo
1 of 11
Nama : Ummi khairani
Nim : 1412511188
Kelompok : KI
 Responsive Web Design adalah sebuah teknik yang
digunakan untuk membuat layout website
menyesuaikan diri dengan tampilan device
pengunjung, baik ukuran maupun orientasinya. Jadi
tampilan yang berada di desktop komputer dengan
tampilan yang diakses melalu SmartPhone misalnya,
itu akan berbeda tampilannya. Responsive Web
Design Untuk mengetes tampilan yang menggunakan
teknik Responsive tersebut tidak harus
mengaksesnya melalui mobile device ataupun device
lainnya, namun cukup dengan meminimize browser
saja ke dalam ukuran mobile device yang diinginkan,
kita sudah dapat melihat tampilan website kita pada
layar mobile device.
 1. Skinny Ties
 2. Folksy
 3. United Pixel Workers
 4. Tommy Hilfiger
 5. Currys
 Bootstrap
 Foundation
 Semantic-UI
 Less Framework
 MQFramework
 Golden Grid System
 Bootstrap
Bootstrap telah menyediakan kumpulan komponen class
interface dasar yang telah di rancang sedemikian rupa
untuk menciptakan tampilan yang menarik, bersih dan
ringan. selain komponen class interface, bootstrap juga
memiliki fitur grid yang berfungsi untuk mengatur
layout pada halaman website yang bisa digunakan
dengan sangat mudah dan cepat. dengan menggunakan
bootstrap kita juga di beri keleluasaan dalam
mengembangkan tampilan website yang
menggunakanbootstrap yaitu dengan cara mengubah
tampilan bootstrap dengan menambahkan class dan
CSS sendiri.
 Foundation
framework untuk membuat disain web
responsive dengan cepat. Cepat disini
bukan berarti instan kayak popmie.
Mengetahui dasar HTML dan CSS akan
sangat membantu menggunakan framework
ini. But fear not, foundation ini cuma ready
made CSS dan javascript untuk membantu
para disainer. Yep, thats right, designer, not
engineer. Belajar foundation tidak akan
memakan waktu lama.
 Semantic UI
Semantic-UI disebut sebagai pesaing ketat
dari Bootstrap karena framework yang satau
ini memberikan desain web yang sangat
modern pada pembaruan terbarunya
Semantic UI sudah terintegrasi dengan
angular, ember, dan meteor sehingga sangat
cocok digunaka. pada proyek yang besar dan
kompleks.
 Less Framework
LESS adalah preprosesor CSS yang memberikan
sentuhan dinamis kepada CSS dengan fitur
variabel, mixin, serta operasi dan fungsi yang
dimilikinnya. Tujuan dibuatnya LESS sendiri adalah
untuk memberikan kemudahan dan keringkasan dalam
membangun tampilan website yang menggunakan CSS.
Proses kompilasi LESS menjadi CSS dapat berjalan baik
di sisi klien dengan javascript maupun di
sisi server dengan bantuan Node.js dan Rhino. Berkas
LESS yang memiliki format *.less dan akan diubah
menjadi file berformat CSS oleh file javascript less.js
pada sisi klien atau melalui kompilasi pada sisi server.
 MQFramework
tersusun dari 12 kolom grid, yang telah
disusun sesuai dengan kebutuhan yang
berbeda, baik dari sebuah proyek baru ke
penyesuaian proyek yang sudah ada dengan
sedikit perubahan pada kode. Satu file CSS
mengimport file-file framework dan custom
stylesheet untuk desain situs kamu. Ini
menggunakan media properti @ untuk
memungkinkan kamu merancang situs yang
kamu bangun ke semua ukuran browser.
 Golden Grid System
membagi screen menjadi 18 kolom. Kolom
paling kiri dan paling kanan digunakan
sebagai margin luar dari grid, yang
meninggalkan 16 kolom untuk digunakan
dalam desain layout. 16 kolom dapat
dikombinasikan, atau dilipat menjadi 8
kolom untuk ukuran tablet screen, dan
menjadi 4 kolom untuk ukuran mobile
screen.
 Dengan ini Golden Grid System dengan
mudah dapat menutupi setiap ukuran layar
dari 240 hingga 2560 pixel.

More Related Content

What's hot

Tugas 1 ( 1412510263 joko wijayanto)
Tugas 1 ( 1412510263   joko wijayanto)Tugas 1 ( 1412510263   joko wijayanto)
Tugas 1 ( 1412510263 joko wijayanto)
jokosingo
 
Pelatihan Web Designer
Pelatihan Web DesignerPelatihan Web Designer
Pelatihan Web Designer
firdo1016
 

What's hot (18)

Tugas 1(individu) dimas setiadi 0916
Tugas 1(individu) dimas setiadi 0916Tugas 1(individu) dimas setiadi 0916
Tugas 1(individu) dimas setiadi 0916
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
 
Rekayasa web tugas 1
Rekayasa web tugas 1Rekayasa web tugas 1
Rekayasa web tugas 1
 
Tugas 6 rekayasa web_ nasrul akbar 1412510552
Tugas 6  rekayasa web_ nasrul akbar 1412510552Tugas 6  rekayasa web_ nasrul akbar 1412510552
Tugas 6 rekayasa web_ nasrul akbar 1412510552
 
02 rekayasa web
02 rekayasa web02 rekayasa web
02 rekayasa web
 
Tigas rekayasa web 1412510016
Tigas rekayasa web 1412510016Tigas rekayasa web 1412510016
Tigas rekayasa web 1412510016
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Tugas 1 rekayasa web 0316 KI
Tugas 1 rekayasa web 0316 KITugas 1 rekayasa web 0316 KI
Tugas 1 rekayasa web 0316 KI
 
Tugas 2 rekayasa web
Tugas 2 rekayasa webTugas 2 rekayasa web
Tugas 2 rekayasa web
 
Tugas 1 ( 1412510263 joko wijayanto)
Tugas 1 ( 1412510263   joko wijayanto)Tugas 1 ( 1412510263   joko wijayanto)
Tugas 1 ( 1412510263 joko wijayanto)
 
Tugas 1 rekweb
Tugas 1 rekwebTugas 1 rekweb
Tugas 1 rekweb
 
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi SaputraBelajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
Tugas6 0317-fani heryati-1411511262
Tugas6 0317-fani heryati-1411511262Tugas6 0317-fani heryati-1411511262
Tugas6 0317-fani heryati-1411511262
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316
 
Pelatihan Web Designer
Pelatihan Web DesignerPelatihan Web Designer
Pelatihan Web Designer
 
Tugas 3 matkul rekayasa web 0317
Tugas 3 matkul rekayasa web 0317Tugas 3 matkul rekayasa web 0317
Tugas 3 matkul rekayasa web 0317
 

Viewers also liked

місячник пожежної безпеки днз №3
місячник пожежної безпеки днз №3місячник пожежної безпеки днз №3
місячник пожежної безпеки днз №3
Руслан Симивол
 

Viewers also liked (18)

Power point
Power pointPower point
Power point
 
devi_CV
devi_CVdevi_CV
devi_CV
 
толока
толокатолока
толока
 
12 січня 2017 року в днз
12 січня 2017 року в днз12 січня 2017 року в днз
12 січня 2017 року в днз
 
Effects Of Herbal Slimming Tea
Effects Of Herbal Slimming TeaEffects Of Herbal Slimming Tea
Effects Of Herbal Slimming Tea
 
Rahul_CV_2016
Rahul_CV_2016Rahul_CV_2016
Rahul_CV_2016
 
Работа, вакансия для студентов и аспирантов
Работа, вакансия для студентов и аспирантовРабота, вакансия для студентов и аспирантов
Работа, вакансия для студентов и аспирантов
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
 
Tugas 5
Tugas 5Tugas 5
Tugas 5
 
John mora
John moraJohn mora
John mora
 
IS audit checklist
IS audit checklistIS audit checklist
IS audit checklist
 
місячник пожежної безпеки днз №3
місячник пожежної безпеки днз №3місячник пожежної безпеки днз №3
місячник пожежної безпеки днз №3
 
Perfil ocupacional
Perfil ocupacionalPerfil ocupacional
Perfil ocupacional
 
Выставочная работа библиотеки : Требования к организации, содержанию и описан...
Выставочная работа библиотеки : Требования к организации, содержанию и описан...Выставочная работа библиотеки : Требования к организации, содержанию и описан...
Выставочная работа библиотеки : Требования к организации, содержанию и описан...
 
3 0003
3   00033   0003
3 0003
 
свято маланки 2017
свято маланки 2017свято маланки 2017
свято маланки 2017
 
документ Microsoft word
документ Microsoft wordдокумент Microsoft word
документ Microsoft word
 
Facebook
Facebook Facebook
Facebook
 

Similar to Tugas6.rekweb

HTML, CSS, JAVASCRIPT.pptx
HTML, CSS, JAVASCRIPT.pptxHTML, CSS, JAVASCRIPT.pptx
HTML, CSS, JAVASCRIPT.pptx
kays17
 
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyek
Yan Bali
 

Similar to Tugas6.rekweb (20)

Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6
 
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarina
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]
 
Laporan tugas besar_web
Laporan tugas besar_webLaporan tugas besar_web
Laporan tugas besar_web
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
13.4.pptx
13.4.pptx13.4.pptx
13.4.pptx
 
Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
 
HTML, CSS, JAVASCRIPT.pptx
HTML, CSS, JAVASCRIPT.pptxHTML, CSS, JAVASCRIPT.pptx
HTML, CSS, JAVASCRIPT.pptx
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)
 
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyek
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas 4 rekayasa web (0916)
Tugas 4   rekayasa web (0916)Tugas 4   rekayasa web (0916)
Tugas 4 rekayasa web (0916)
 
Frame work php
Frame work phpFrame work php
Frame work php
 
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
 
Tugas 6 rekweb 0316
Tugas 6 rekweb 0316Tugas 6 rekweb 0316
Tugas 6 rekweb 0316
 
Chapter 1 perkenalan code igniter 2.0
Chapter 1 perkenalan code igniter 2.0Chapter 1 perkenalan code igniter 2.0
Chapter 1 perkenalan code igniter 2.0
 
Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)
 

More from Ummi khairani (6)

Tugas7 ki-0316-rekweb
Tugas7 ki-0316-rekwebTugas7 ki-0316-rekweb
Tugas7 ki-0316-rekweb
 
Tugas 5 rekweb 0316
Tugas 5  rekweb  0316Tugas 5  rekweb  0316
Tugas 5 rekweb 0316
 
Tugas 4 rekayasa web
Tugas 4 rekayasa webTugas 4 rekayasa web
Tugas 4 rekayasa web
 
Tugas 3 rekayasa web
Tugas 3 rekayasa webTugas 3 rekayasa web
Tugas 3 rekayasa web
 
Tugas 2 rekaya web
Tugas 2 rekaya webTugas 2 rekaya web
Tugas 2 rekaya web
 
Tugas 1 rekaya web
Tugas 1 rekaya webTugas 1 rekaya web
Tugas 1 rekaya web
 

Tugas6.rekweb

  • 1. Nama : Ummi khairani Nim : 1412511188 Kelompok : KI
  • 2.  Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.
  • 3.  1. Skinny Ties  2. Folksy  3. United Pixel Workers  4. Tommy Hilfiger  5. Currys
  • 4.
  • 5.  Bootstrap  Foundation  Semantic-UI  Less Framework  MQFramework  Golden Grid System
  • 6.  Bootstrap Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakanbootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.
  • 7.  Foundation framework untuk membuat disain web responsive dengan cepat. Cepat disini bukan berarti instan kayak popmie. Mengetahui dasar HTML dan CSS akan sangat membantu menggunakan framework ini. But fear not, foundation ini cuma ready made CSS dan javascript untuk membantu para disainer. Yep, thats right, designer, not engineer. Belajar foundation tidak akan memakan waktu lama.
  • 8.  Semantic UI Semantic-UI disebut sebagai pesaing ketat dari Bootstrap karena framework yang satau ini memberikan desain web yang sangat modern pada pembaruan terbarunya Semantic UI sudah terintegrasi dengan angular, ember, dan meteor sehingga sangat cocok digunaka. pada proyek yang besar dan kompleks.
  • 9.  Less Framework LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format *.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada sisi klien atau melalui kompilasi pada sisi server.
  • 10.  MQFramework tersusun dari 12 kolom grid, yang telah disusun sesuai dengan kebutuhan yang berbeda, baik dari sebuah proyek baru ke penyesuaian proyek yang sudah ada dengan sedikit perubahan pada kode. Satu file CSS mengimport file-file framework dan custom stylesheet untuk desain situs kamu. Ini menggunakan media properti @ untuk memungkinkan kamu merancang situs yang kamu bangun ke semua ukuran browser.
  • 11.  Golden Grid System membagi screen menjadi 18 kolom. Kolom paling kiri dan paling kanan digunakan sebagai margin luar dari grid, yang meninggalkan 16 kolom untuk digunakan dalam desain layout. 16 kolom dapat dikombinasikan, atau dilipat menjadi 8 kolom untuk ukuran tablet screen, dan menjadi 4 kolom untuk ukuran mobile screen.  Dengan ini Golden Grid System dengan mudah dapat menutupi setiap ukuran layar dari 240 hingga 2560 pixel.