tugas6 [ku]-0316-kahfi arif akbar-1012501571

16

Click here to load reader

Upload: kahfi-ariep-akbar

Post on 22-Jan-2018

49 views

Category:

Education


1 download

TRANSCRIPT

Page 1: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

TUGAS 6REKAYASA WEB

0316

Page 2: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

Kahfi Arif Akbar1012501571Kel. KU

Page 3: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

RESPONSIVE WEB DESIGN

Pengertian dan Contohnya

Page 4: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

RESPONSIVE WEBDESIGN

Adalah sebuah teknik yang digunakan untuk membuatlayout suatu website kompatibel dengan tampilandevice pengunjung, baikukuran maupun orientasinya.

Jadi tampilan pada desktop komputer akan diubahsedemikian rupa agar bisadibuka secara maksimal diukuran layar yang lebih kecilseperti smartphone maupuntablet.

Page 5: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

BONOBOShttp://bonobos.com

Page 6: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

BOOTSTRAPhttp://getbootstrap.com

Page 7: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

STARBUCKShttp://starbucks.com

Page 8: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Alerts Yes Yes No

Badges No Yes No

Breadcrumbs Yes Yes No

Buttons Yes Yes Yes

Carousel Yes Yes No

Page 9: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Collapse/Accordion Yes Yes No

Dropdown Yes Yes No

Forms Yes Yes Yes

FormValidation Yes Yes No

Grids Yes Yes Yes

Page 10: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Icons No Yes No

Labels Yes Yes No

Lists Yes Yes Yes

Lists Horizontal No Yes No

Media Object Yes Yes No

Page 11: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Modals Yes Yes No

Navigation Yes Yes No

Navigation Sticky Yes Yes No

Navigation Off Canvas Yes Yes No

Pagination Yes Yes No

Page 12: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Panel Yes Yes No

Popovers Yes Yes No

Print Styles Yes Yes No

Progress Bars Yes Yes No

Responsive Media No Yes No

Page 13: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Right-to-Left Unknown Yes No

Scrollspy Yes Yes No

Tables Yes Yes Yes

Tabs Yes Yes No

Thumbnail Yes Yes No

Page 14: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

Bootstrap Foundation Skeleton

Tooltips Yes Yes No

Tour No No No

Typeahead No No No

Typograph Yes Yes Yes

VideoScalling Yes Yes No

Page 15: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

PerbandinganRESPONSIVE WEB DESIGN

dalam CSS

Bootstrap Foundation Skeleton

Reset reboot.css normalize.css normalize.css

LESS No No No

Sass/Scss Yes Yes No

Page 16: Tugas6 [ku]-0316-kahfi arif akbar-1012501571

THANKS