SlideShare a Scribd company logo
NAMA : SLAMET ERVAN
NIM : 1512510692
KEJURUAN : FTI (FakultasTeknikInformatika)
TUGAS : Tugas2 IndividuRekayasaWeb
PengertianWEB-RESPONSIVE
Pengenalan
Sekarangbanyakorang melakukanaktivitas online melaluidevice SmartPhone,sepertiupdate status,
uploadgambar,dan tidakterkecuali mengaksessebuahwebsite.Dengankeadaanyangseperti ini,mau
tidakmau kitasebagai pemilikwebsiteharusmemilikiwebsiteyangbisadiaksesmelaluidevice
SmartPhone tersebut.Bagi yangmenggunakanCMSseperti WordPressmungkinsudahtersedia
pluginnya,tapi bagaimanadenganyangmembuatnyadari awal ataunol atau menggunakanCMSyang
belumtersediapluginmobile tersebut?Tentunyaharusmembuatulangwebsitenya dalambentuk
mobile bukan.Lalubagaimanasolusinya?Nahdenganhadirnyateknologi Responsiveini,kitahanya
perlumenggunakansatudesignsajauntukberbagai device yangada.Ini adalahcara terbaikjikakita
malasuntukmendevelopulangwebsitekitaagarsesuai denganmobiledevice.
Apa itu RESPONSIVE DESIGN?
Responsive WebDesignadalahsebuahteknikyangdigunakanuntukmembuatlayoutwebsite
menyesuaikandiri dengantampilandevice pengunjung,baikukuranmaupunorientasinya.Jadi tampilan
yang beradadi desktopkomputerdengantampilanyangdiaksesmelaluSmartPhone misalnya,ituakan
berbedatampilannya.Responsive WebDesignUntukmengetestampilanyangmenggunakanteknik
Responsive tersebuttidakharusmengaksesnyamelalui mobile device ataupundevicelainnya,namun
cukupdenganmeminimize browsersajake dalamukuranmobile device yangdiinginkan,kitasudah
dapat melihattampilanwebsite kitapadalayarmobile device.
Kelebihandan Kekurangan
Teknikini sudahmulai banyakdigunakandikalanganwebdesainerluarmaupunlokal danmemiliki
beberapakeuntungan,salahsatunyaadalahpenghematanpenggunaansubdomain,yangtadinyakalau
mengaksesharusmenggunakankata“mobile”atau“m” didepandomainnya,sekarangcukupdengan
mengetiknamadomainnyasajadantampilanakanmenyesuaikandengandevice yangdigunakan.
Keuntunganyangpalingutamatentusajadapat mengurangi jumlahdevelopmentmenjadi satusaja
untukdipakai semuadevices.Lalukelemahandari teknikiniadalahjikadigunakanpadawebsite yang
bertujuanuntukmenampilkangambarsaja,seperti website fotografi misalnya.Resource gambaryang
diloadolehdevice kitaakansamadenganyang diloaddikomputerkita.Untukitukitaperlu
memperhatikanapakahwebsiteyangkitabuatcocok untukdipakaikanteknikResponsive ini.
PengertianBootstrap
Bootstrapadalahfront-endframeworkyangsolek,bagusdanluarbiasayang mengedapankantampilan
untukmobile device(Handphone,smartphone dll.)gunamempercepatdanmempermudah
pengembanganwebsite.BootstrapmenyediakanHTML,CSSdan Javascriptsiappakai dan mudahuntuk
dikembangkan.
Contoh webyang menggunakanbootstrap
1. DesainWeb– HBO NOW
HBO NOW,menggunakansistemgrid,responsive,disetsatuhalamanpenuh.JikaAndascroll ke
bawahakantampil sistemnavigasifixed-width.Situsini terlihattidakmemakai banyakhalaman,cukup
satu halamansajadenganinformasi yangsingkat,padatdanjelas.Warnahitamdisetpada
backgroundnya.Sayasangattertarikdenganslide padamenu“WhatYou Get”, jikadiarahkanpadasalah
satu barisdari ketigaslide akanotomatisterhenti yanglaintetapberjalan.
2. DesainWeb– Egelnick+ Webb
Egelnick+ Webbm,padahalamandepannyaditampilkanslide denganfull widthdanmenu
navigasiditetapkandenganfixed-widthdengan warnabackgroundputihbegitujugabackgroundbody-
nya.Di bawahslide mulai dibuattampilansistemgriddengan2kolomdan3 kolom.Situsini
memadukanframeworkBootstrapdenganPlatformCMSWordPress.
3. DesainWeb– UENO
UEONO,menampilkansitus yangfull-widthdenganmenyuguhkansebuahdesainresponsive
yangsederhanatetapmenawan.Sistemnavigasi menggunakanbuttondi sebelahkanantanpaAnda
memerlukanbantuanmouse untukscroll ke bawah,pilihtombol sajalangsungke halamanyangdituju.
Jikadijadikaninspirasi untukprojekdesainwebuntukkorporasi sangatcocok.
4. DesainWeb– Swipe
Swipe,memadukanWordPressdanBootstrapmenampilkanhalamandepansatuhalamanpenuh.Scroll
ke bawah Andaakan menemukansistemgridbegitupulapadahalamanblogdanFAQ sudahdiset
sistemgridfluiddanresponsive.
5. DesainWeb– WoodiesClo.
WoodiesClo.,tanpamenggunakanspace ataupaddingyangnampakdi halamandepannya.Header
denganmenunavigasi disetfixed-width,di bawahnyadibuatcarousel slide full-width.Nah,penggunaan
sistemgriddi sekitartigabarisdengandua kolomzig-zagterlihatsangatunik.Danmemakai 4kolom
untukbagianfooter.DengandesainresponsivememakaiframeworkBootstrapdipadukanopenssource
cms WordPress.
PengertianIndexingdalam database
Indeksdalamdatabase serupadenganindeksdalambuku.Di suatubuku,satuindeksmemungkinkan
anda untukmenemukaninformasi dengancepattanpamembacaseluruhbuku.Di suatudatabase,
indeksmemungkinkanprogramdatabase menemukan datadi suatutabel tanpamenelusuri seluruh
tabel.Satuindeksdi suatubukuadalahdaftar kata-katadenganangka-angkahalamanberisi masing-
masingkata.Satu indeksdi suatudatabase adalahdaftardata tertentudari tabel denganlokasi
penyimpananbarisdalamtabel berisi masing-masingnilai.indeksdapatdiciptakandimanapunsuatu
kolomatau suatukombinasi dari kolomdi suatutabel danditerapkandalamwujudB-trees.Satuindeks
berisi masukandengansatuataulebihkolom(kunci pencarian) dari masing-masingbarisdi suatutabel.
B-tree disortirdi kunci pencarian,dandapatdicari secara efisiendi setiapsubsetyangterdepandari
kunci pencarian.Sebagai contoh,satuindeksdi kolomA,B,C dapatdicari secara efisiendi A,A,B,danA,
B, C.Sebagian besarbukuberisi satuindeksdari kata-kataumum, nama,tempat,danseterusnya.
Database berisi indeksyangindividuuntukjenisataukolomyangterpilihdari data:ini serupadengan
sebuahbukuyangberisi indeksuntuknamadari orangdan indekslainuntuktempat.Ketikaanda
membuatsuatudatabase danmenadaptkankinerja,andaperlumembuatindeksuntukkolomyang
digunakandi dalamqueryuntukmenemukandataDalamcontohdatabase,tabelkaryawanmempunyai
satu indeksdi kolomemp_id.Ilustrasiyangberikutmenunjukkanbagaimanaindeksmenyimpanmasing-
masingnilai emp_iddanpoin-poinke barisKetikaaplikasidatabase melaksanakansuatustatemenuntuk
menemukandatadalamtabel karyawanberdasarsuatunilai emp_idyangditetapkan,mengenali indeks
untukkolomemp_iddanmenggunakanindeksituuntukmenemukandata.Jikaindekstidakada,
melaksanakansuatupermulaanscantabel yangpenuhpadaawal tabel danmelangkahmelalui masing-
masingbaris,mencari-cari nilai emp_idyangditetapkan.
PengertianJSON
JSON (JavaScriptObjectNotation)adalahformatpertukarandatayangringan,mudahdibaca danditulis
olehmanusia,sertamudahditerjemahkandandibuat(generate) olehkomputer.Formatini dibuat
berdasarkanbagiandari Bahasa PemprogramanJavaScript,StandarECMA-262 Edisi ke-3- Desember
1999. JSON merupakanformatteksyangtidakbergantungpadabahasa pemprogramanapapunkarena
menggunakangayabahasayang umumdigunakanolehprogrammerkeluargaCtermasukC,C++, C#,
Java,JavaScript,Perl,Pythondll. Olehkarenasifat-sifattersebut,menjadikanJSON idealsebagai bahasa
pertukaran-data.

More Related Content

Viewers also liked

NEHF Happy, Healthy, at Home symposium 100117 Workshop 4 - Evaluating teams...
NEHF Happy, Healthy, at Home symposium 100117   Workshop 4 - Evaluating teams...NEHF Happy, Healthy, at Home symposium 100117   Workshop 4 - Evaluating teams...
NEHF Happy, Healthy, at Home symposium 100117 Workshop 4 - Evaluating teams...
Health Innovation Wessex
 
RESUME_RHOWTON_02FEB2017
RESUME_RHOWTON_02FEB2017RESUME_RHOWTON_02FEB2017
RESUME_RHOWTON_02FEB2017Roza Howton
 
Jmp company profile
Jmp company profileJmp company profile
Jmp company profile
Yogi JMP
 
Ppp showcase w: references
Ppp showcase w: referencesPpp showcase w: references
Ppp showcase w: references
Jmitchellkyle
 
Dica seminar 16_12_2015
Dica seminar 16_12_2015Dica seminar 16_12_2015
Dica seminar 16_12_2015
Giovanni Menduni
 

Viewers also liked (7)

seaton_portfoliolo
seaton_portfolioloseaton_portfoliolo
seaton_portfoliolo
 
NEHF Happy, Healthy, at Home symposium 100117 Workshop 4 - Evaluating teams...
NEHF Happy, Healthy, at Home symposium 100117   Workshop 4 - Evaluating teams...NEHF Happy, Healthy, at Home symposium 100117   Workshop 4 - Evaluating teams...
NEHF Happy, Healthy, at Home symposium 100117 Workshop 4 - Evaluating teams...
 
RESUME_RHOWTON_02FEB2017
RESUME_RHOWTON_02FEB2017RESUME_RHOWTON_02FEB2017
RESUME_RHOWTON_02FEB2017
 
Jmp company profile
Jmp company profileJmp company profile
Jmp company profile
 
Ppp showcase w: references
Ppp showcase w: referencesPpp showcase w: references
Ppp showcase w: references
 
Dica seminar 16_12_2015
Dica seminar 16_12_2015Dica seminar 16_12_2015
Dica seminar 16_12_2015
 
Shiv Kumar
Shiv KumarShiv Kumar
Shiv Kumar
 

Similar to Tugas 2 Individu Rekayasa Web

Penjelasan Responsive Web Design
Penjelasan Responsive Web DesignPenjelasan Responsive Web Design
Penjelasan Responsive Web Design
Samsul Arifin
 
Isfan fs
Isfan fsIsfan fs
Isfan fs
isfanfajar
 
Review kuliah tamu
Review kuliah tamu Review kuliah tamu
Review kuliah tamu
Mudliul Wahdaniyah
 
Tugas 6 rekayasa web
Tugas 6  rekayasa webTugas 6  rekayasa web
Tugas 6 rekayasa web
Mohammad Arief
 
Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
Novia Indahsari
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316
septianarul
 
13.4.pptx
13.4.pptx13.4.pptx
13.4.pptx
SelinaAulia2
 
Review Seminar Serathon
Review Seminar Serathon Review Seminar Serathon
Review Seminar Serathon
MuhammadFajar123
 
tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)
arif_rachman740
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2
prasetyaadi19
 
Makalah Mobile Programming
Makalah Mobile ProgrammingMakalah Mobile Programming
Makalah Mobile Programming
Vicinthia Veren
 
Artikel 11 8 cara meningkatkan keamanan word press dari hacker
Artikel 11 8 cara meningkatkan keamanan word press dari hackerArtikel 11 8 cara meningkatkan keamanan word press dari hacker
Artikel 11 8 cara meningkatkan keamanan word press dari hacker
MarkDesignJakartaSurabaya
 
Presentasi Kelompok 6 Tentang Front End & Back End.pptx
Presentasi Kelompok 6 Tentang Front End & Back End.pptxPresentasi Kelompok 6 Tentang Front End & Back End.pptx
Presentasi Kelompok 6 Tentang Front End & Back End.pptx
12DirgaEkaPrasetya
 
Pengenalan Web Modern.pptx
Pengenalan Web Modern.pptxPengenalan Web Modern.pptx
Pengenalan Web Modern.pptx
HendraDwiSaputra3
 
Interaksi Manusia dan Komputer - Preview UI WhatsApp Web
Interaksi Manusia dan Komputer - Preview UI WhatsApp WebInteraksi Manusia dan Komputer - Preview UI WhatsApp Web
Interaksi Manusia dan Komputer - Preview UI WhatsApp Web
Nanda Danu Lukita
 
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server DockerMembuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
RizkyCrown
 
Modul dreamweaver dasar
Modul dreamweaver dasarModul dreamweaver dasar
Modul dreamweaver dasar
agus salim
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
YUSRA FERNANDO
 
Tugas 6 rekweb
Tugas 6   rekwebTugas 6   rekweb
Tugas 6 rekweb
rimaafauziaah
 

Similar to Tugas 2 Individu Rekayasa Web (20)

Penjelasan Responsive Web Design
Penjelasan Responsive Web DesignPenjelasan Responsive Web Design
Penjelasan Responsive Web Design
 
Isfan fs
Isfan fsIsfan fs
Isfan fs
 
Review kuliah tamu
Review kuliah tamu Review kuliah tamu
Review kuliah tamu
 
Tugas 6 rekayasa web
Tugas 6  rekayasa webTugas 6  rekayasa web
Tugas 6 rekayasa web
 
Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316
 
13.4.pptx
13.4.pptx13.4.pptx
13.4.pptx
 
Review Seminar Serathon
Review Seminar Serathon Review Seminar Serathon
Review Seminar Serathon
 
tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2
 
Makalah Mobile Programming
Makalah Mobile ProgrammingMakalah Mobile Programming
Makalah Mobile Programming
 
cloud computing
cloud computingcloud computing
cloud computing
 
Artikel 11 8 cara meningkatkan keamanan word press dari hacker
Artikel 11 8 cara meningkatkan keamanan word press dari hackerArtikel 11 8 cara meningkatkan keamanan word press dari hacker
Artikel 11 8 cara meningkatkan keamanan word press dari hacker
 
Presentasi Kelompok 6 Tentang Front End & Back End.pptx
Presentasi Kelompok 6 Tentang Front End & Back End.pptxPresentasi Kelompok 6 Tentang Front End & Back End.pptx
Presentasi Kelompok 6 Tentang Front End & Back End.pptx
 
Pengenalan Web Modern.pptx
Pengenalan Web Modern.pptxPengenalan Web Modern.pptx
Pengenalan Web Modern.pptx
 
Interaksi Manusia dan Komputer - Preview UI WhatsApp Web
Interaksi Manusia dan Komputer - Preview UI WhatsApp WebInteraksi Manusia dan Komputer - Preview UI WhatsApp Web
Interaksi Manusia dan Komputer - Preview UI WhatsApp Web
 
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server DockerMembuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
 
Modul dreamweaver dasar
Modul dreamweaver dasarModul dreamweaver dasar
Modul dreamweaver dasar
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
 
Tugas 6 rekweb
Tugas 6   rekwebTugas 6   rekweb
Tugas 6 rekweb
 

Recently uploaded

Koneksi Antar Materi Modul 1.4.ppt x
Koneksi Antar Materi Modul 1.4.ppt           xKoneksi Antar Materi Modul 1.4.ppt           x
Koneksi Antar Materi Modul 1.4.ppt x
johan199969
 
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
muhammadRifai732845
 
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdfMATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
ssuser289c2f1
 
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrinPatofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
rohman85
 
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
AgusRahmat39
 
Juknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptx
Juknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptxJuknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptx
Juknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptx
mattaja008
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
gloriosaesy
 
Program Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdfProgram Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdf
erlita3
 
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptxRANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
SurosoSuroso19
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
NurSriWidyastuti1
 
813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx
813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx
813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx
RinawatiRinawati10
 
Laporan pembina seni tari - www.kherysuryawan.id.pdf
Laporan pembina seni tari - www.kherysuryawan.id.pdfLaporan pembina seni tari - www.kherysuryawan.id.pdf
Laporan pembina seni tari - www.kherysuryawan.id.pdf
heridawesty4
 
Prensentasi Visi Misi Sekolah dalam rangka observasi pengawas
Prensentasi Visi Misi Sekolah dalam rangka observasi pengawasPrensentasi Visi Misi Sekolah dalam rangka observasi pengawas
Prensentasi Visi Misi Sekolah dalam rangka observasi pengawas
suprihatin1885
 
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docxRUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
kinayaptr30
 
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdfPETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
Hernowo Subiantoro
 
tugas modul 1.4 Koneksi Antar Materi (1).pptx
tugas  modul 1.4 Koneksi Antar Materi (1).pptxtugas  modul 1.4 Koneksi Antar Materi (1).pptx
tugas modul 1.4 Koneksi Antar Materi (1).pptx
d2spdpnd9185
 
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum MerdekaModul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Fathan Emran
 
PPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdfPPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdf
safitriana935
 
tugas pai kelas 10 rangkuman bab 10 smk madani bogor
tugas pai kelas 10 rangkuman bab 10 smk madani bogortugas pai kelas 10 rangkuman bab 10 smk madani bogor
tugas pai kelas 10 rangkuman bab 10 smk madani bogor
WILDANREYkun
 
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
widyakusuma99
 

Recently uploaded (20)

Koneksi Antar Materi Modul 1.4.ppt x
Koneksi Antar Materi Modul 1.4.ppt           xKoneksi Antar Materi Modul 1.4.ppt           x
Koneksi Antar Materi Modul 1.4.ppt x
 
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
 
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdfMATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
 
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrinPatofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
 
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
 
Juknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptx
Juknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptxJuknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptx
Juknis Pengisian Blanko Ijazah 2024 29 04 2024 Top.pptx
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
 
Program Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdfProgram Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdf
 
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptxRANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
 
813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx
813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx
813 Modul Ajar KurMer Usaha, Energi, dan Pesawat Sederhana (2).docx
 
Laporan pembina seni tari - www.kherysuryawan.id.pdf
Laporan pembina seni tari - www.kherysuryawan.id.pdfLaporan pembina seni tari - www.kherysuryawan.id.pdf
Laporan pembina seni tari - www.kherysuryawan.id.pdf
 
Prensentasi Visi Misi Sekolah dalam rangka observasi pengawas
Prensentasi Visi Misi Sekolah dalam rangka observasi pengawasPrensentasi Visi Misi Sekolah dalam rangka observasi pengawas
Prensentasi Visi Misi Sekolah dalam rangka observasi pengawas
 
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docxRUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
 
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdfPETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
 
tugas modul 1.4 Koneksi Antar Materi (1).pptx
tugas  modul 1.4 Koneksi Antar Materi (1).pptxtugas  modul 1.4 Koneksi Antar Materi (1).pptx
tugas modul 1.4 Koneksi Antar Materi (1).pptx
 
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum MerdekaModul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
 
PPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdfPPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdf
 
tugas pai kelas 10 rangkuman bab 10 smk madani bogor
tugas pai kelas 10 rangkuman bab 10 smk madani bogortugas pai kelas 10 rangkuman bab 10 smk madani bogor
tugas pai kelas 10 rangkuman bab 10 smk madani bogor
 
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
 

Tugas 2 Individu Rekayasa Web

  • 1. NAMA : SLAMET ERVAN NIM : 1512510692 KEJURUAN : FTI (FakultasTeknikInformatika) TUGAS : Tugas2 IndividuRekayasaWeb
  • 2. PengertianWEB-RESPONSIVE Pengenalan Sekarangbanyakorang melakukanaktivitas online melaluidevice SmartPhone,sepertiupdate status, uploadgambar,dan tidakterkecuali mengaksessebuahwebsite.Dengankeadaanyangseperti ini,mau tidakmau kitasebagai pemilikwebsiteharusmemilikiwebsiteyangbisadiaksesmelaluidevice SmartPhone tersebut.Bagi yangmenggunakanCMSseperti WordPressmungkinsudahtersedia pluginnya,tapi bagaimanadenganyangmembuatnyadari awal ataunol atau menggunakanCMSyang belumtersediapluginmobile tersebut?Tentunyaharusmembuatulangwebsitenya dalambentuk mobile bukan.Lalubagaimanasolusinya?Nahdenganhadirnyateknologi Responsiveini,kitahanya perlumenggunakansatudesignsajauntukberbagai device yangada.Ini adalahcara terbaikjikakita malasuntukmendevelopulangwebsitekitaagarsesuai denganmobiledevice. Apa itu RESPONSIVE DESIGN? Responsive WebDesignadalahsebuahteknikyangdigunakanuntukmembuatlayoutwebsite menyesuaikandiri dengantampilandevice pengunjung,baikukuranmaupunorientasinya.Jadi tampilan yang beradadi desktopkomputerdengantampilanyangdiaksesmelaluSmartPhone misalnya,ituakan berbedatampilannya.Responsive WebDesignUntukmengetestampilanyangmenggunakanteknik Responsive tersebuttidakharusmengaksesnyamelalui mobile device ataupundevicelainnya,namun cukupdenganmeminimize browsersajake dalamukuranmobile device yangdiinginkan,kitasudah dapat melihattampilanwebsite kitapadalayarmobile device. Kelebihandan Kekurangan Teknikini sudahmulai banyakdigunakandikalanganwebdesainerluarmaupunlokal danmemiliki beberapakeuntungan,salahsatunyaadalahpenghematanpenggunaansubdomain,yangtadinyakalau mengaksesharusmenggunakankata“mobile”atau“m” didepandomainnya,sekarangcukupdengan mengetiknamadomainnyasajadantampilanakanmenyesuaikandengandevice yangdigunakan. Keuntunganyangpalingutamatentusajadapat mengurangi jumlahdevelopmentmenjadi satusaja untukdipakai semuadevices.Lalukelemahandari teknikiniadalahjikadigunakanpadawebsite yang bertujuanuntukmenampilkangambarsaja,seperti website fotografi misalnya.Resource gambaryang diloadolehdevice kitaakansamadenganyang diloaddikomputerkita.Untukitukitaperlu memperhatikanapakahwebsiteyangkitabuatcocok untukdipakaikanteknikResponsive ini. PengertianBootstrap Bootstrapadalahfront-endframeworkyangsolek,bagusdanluarbiasayang mengedapankantampilan untukmobile device(Handphone,smartphone dll.)gunamempercepatdanmempermudah pengembanganwebsite.BootstrapmenyediakanHTML,CSSdan Javascriptsiappakai dan mudahuntuk dikembangkan.
  • 3. Contoh webyang menggunakanbootstrap 1. DesainWeb– HBO NOW HBO NOW,menggunakansistemgrid,responsive,disetsatuhalamanpenuh.JikaAndascroll ke bawahakantampil sistemnavigasifixed-width.Situsini terlihattidakmemakai banyakhalaman,cukup satu halamansajadenganinformasi yangsingkat,padatdanjelas.Warnahitamdisetpada backgroundnya.Sayasangattertarikdenganslide padamenu“WhatYou Get”, jikadiarahkanpadasalah satu barisdari ketigaslide akanotomatisterhenti yanglaintetapberjalan. 2. DesainWeb– Egelnick+ Webb Egelnick+ Webbm,padahalamandepannyaditampilkanslide denganfull widthdanmenu navigasiditetapkandenganfixed-widthdengan warnabackgroundputihbegitujugabackgroundbody- nya.Di bawahslide mulai dibuattampilansistemgriddengan2kolomdan3 kolom.Situsini memadukanframeworkBootstrapdenganPlatformCMSWordPress. 3. DesainWeb– UENO UEONO,menampilkansitus yangfull-widthdenganmenyuguhkansebuahdesainresponsive yangsederhanatetapmenawan.Sistemnavigasi menggunakanbuttondi sebelahkanantanpaAnda memerlukanbantuanmouse untukscroll ke bawah,pilihtombol sajalangsungke halamanyangdituju. Jikadijadikaninspirasi untukprojekdesainwebuntukkorporasi sangatcocok. 4. DesainWeb– Swipe Swipe,memadukanWordPressdanBootstrapmenampilkanhalamandepansatuhalamanpenuh.Scroll
  • 4. ke bawah Andaakan menemukansistemgridbegitupulapadahalamanblogdanFAQ sudahdiset sistemgridfluiddanresponsive. 5. DesainWeb– WoodiesClo. WoodiesClo.,tanpamenggunakanspace ataupaddingyangnampakdi halamandepannya.Header denganmenunavigasi disetfixed-width,di bawahnyadibuatcarousel slide full-width.Nah,penggunaan sistemgriddi sekitartigabarisdengandua kolomzig-zagterlihatsangatunik.Danmemakai 4kolom untukbagianfooter.DengandesainresponsivememakaiframeworkBootstrapdipadukanopenssource cms WordPress. PengertianIndexingdalam database Indeksdalamdatabase serupadenganindeksdalambuku.Di suatubuku,satuindeksmemungkinkan anda untukmenemukaninformasi dengancepattanpamembacaseluruhbuku.Di suatudatabase, indeksmemungkinkanprogramdatabase menemukan datadi suatutabel tanpamenelusuri seluruh tabel.Satuindeksdi suatubukuadalahdaftar kata-katadenganangka-angkahalamanberisi masing- masingkata.Satu indeksdi suatudatabase adalahdaftardata tertentudari tabel denganlokasi penyimpananbarisdalamtabel berisi masing-masingnilai.indeksdapatdiciptakandimanapunsuatu kolomatau suatukombinasi dari kolomdi suatutabel danditerapkandalamwujudB-trees.Satuindeks berisi masukandengansatuataulebihkolom(kunci pencarian) dari masing-masingbarisdi suatutabel. B-tree disortirdi kunci pencarian,dandapatdicari secara efisiendi setiapsubsetyangterdepandari kunci pencarian.Sebagai contoh,satuindeksdi kolomA,B,C dapatdicari secara efisiendi A,A,B,danA, B, C.Sebagian besarbukuberisi satuindeksdari kata-kataumum, nama,tempat,danseterusnya. Database berisi indeksyangindividuuntukjenisataukolomyangterpilihdari data:ini serupadengan sebuahbukuyangberisi indeksuntuknamadari orangdan indekslainuntuktempat.Ketikaanda membuatsuatudatabase danmenadaptkankinerja,andaperlumembuatindeksuntukkolomyang digunakandi dalamqueryuntukmenemukandataDalamcontohdatabase,tabelkaryawanmempunyai satu indeksdi kolomemp_id.Ilustrasiyangberikutmenunjukkanbagaimanaindeksmenyimpanmasing- masingnilai emp_iddanpoin-poinke barisKetikaaplikasidatabase melaksanakansuatustatemenuntuk menemukandatadalamtabel karyawanberdasarsuatunilai emp_idyangditetapkan,mengenali indeks untukkolomemp_iddanmenggunakanindeksituuntukmenemukandata.Jikaindekstidakada, melaksanakansuatupermulaanscantabel yangpenuhpadaawal tabel danmelangkahmelalui masing- masingbaris,mencari-cari nilai emp_idyangditetapkan. PengertianJSON JSON (JavaScriptObjectNotation)adalahformatpertukarandatayangringan,mudahdibaca danditulis olehmanusia,sertamudahditerjemahkandandibuat(generate) olehkomputer.Formatini dibuat berdasarkanbagiandari Bahasa PemprogramanJavaScript,StandarECMA-262 Edisi ke-3- Desember 1999. JSON merupakanformatteksyangtidakbergantungpadabahasa pemprogramanapapunkarena menggunakangayabahasayang umumdigunakanolehprogrammerkeluargaCtermasukC,C++, C#,