Narasumber Training : Kanaidi, SE., M.Si., cSAP WA. 0877 5871 1905 HP. Kanaidi : 0812 2353 284, e-mail : kanaidi63@gmail.com -----------------------------------------

1. Technical Aspects of Website
and Information System
Development
Training

2. Introduction
• Kesan pertama kali saat pengguna
mengunjungi website Anda sangat
mempengaruhi penilaian mereka ke website
secara keseluruhan.
• Apakah pengguna terkesan atau tidak setelah
mengunjungi situs tergantung pada tata letak
dan visual, serta kemudahan pengunjung untuk
mendapatkan sesuatu yang dibutuhkannya
melalui website Anda.
• Hal ini yang membuat tahap pengembangan
web menjadi salah satu kunci paling penting
dalam membangun kesuksesan citra online
Anda.

3. Introduction ...
• Upaya pengembangan web dapat juga
diumpamakan kita sedang membangun suatu
proyek.
• Setiap proyek besar dari pengembangan website
yang akan garap, harus melalui langkah-langkah
tertentu (mulai dari inisiasi sampai dengan selesai).
• Hal ini penting dilakukan, agar pengembangan
dapat terarah dan menghasilkan sebuah website
yang memiliki nilai. Terlebih lagi menghadapi agile-
nya bisnis/perusahaan saat ini.
• Meskipun tahapan yang tepat dari proses
pengembangan web bervariasi, akan tetapi
langkah-langkah dasar yang harus dilalui dapat
dikatakan adalah mirip-mirip.

4. Apa Itu Web Development?
• Web development atau pengembangan web adalah
sebuah proses pembangunan dan pemeliharaan
situs web.
• Pekerjaan ini dilakukan di balik layar dengan tujuan
untuk membuat situs web yang tampak apik, dan
dapat bekerja dengan cepat.
• Umumnya, selama proses pembangunan,
perusahaan akan berpedoman pada kebutuhan dan
aspirasi customer .
• Hal ini dilakukan agar situs web kelak dapat
memberikan user experience yang mulus dan tidak
membingungkan.
• Proses pengembangan web meliputi desain web,
pengembangan konten web, pembuatan skrip untuk
sisi klien dan server, serta pengaturan keamanan
jaringan.

5. Apa Itu Web Development? ...
• Dalam pengertiannya yang lebih luas, web
development mencakup semua tindakan dan
pembaruan untuk memastikan kinerja situs sesuai
dengan kebutuhan pengguna dengan kecepatan
yang optimal.
• Namun, dewasa ini, pengembangan web juga
mencakup semua tindakan strategis yang
diperlukan untuk memastikan peringkat situs tetap
baik dalam search engine rankings.
• Biasanya, tugas-tugas tersebut berkaitan dengan
spesialisasi yang berbeda, yaitu search engine
optimizer (SEO).

6. Jenis-Jenis Web Development
• Biasanya seorang web developer akan
menguasai berbagai jenis pengembangan
web yang berbeda, agar bisa menjadi
seorang profesional yang lebih fleksibel.
• Terdapat beberapa jenis web
development, yaitu:
1. Front-end development
2. Back-end development
3. Full-stack development
4. Mobile development
https://glints.com/id/lowongan/web-
development/#.YYeaplVBx0w

7. 1. Front-end development
• Jenis web development pertama yang perlu kamu
pelajari merupakan front-end development.
• Tugas utama para developer yang berkecimpung di
bidang ini adalah membangun UI yang dapat
membantu pengguna untuk mencapai tujuan
mereka di dalam situs.
• Itulah sebabnya front-end developer juga sering
ikut andil dalam aspek perancangan UX dalam
proyek mereka.
• Oleh karena itu, memiliki latar belakang di bidang
UX dapat menjadi nilai plus bagi seorang front-
end developer, karena mereka dapat membentuk
empati bagi pengguna.

8. Front-End Roadmap
(Web Development)

9. STEP 1
Learn the Basics
• Setiap Pengembang Web harus memiliki
pemahaman dasar tentang HTML, CSS, dan
JavaScript.
• Desain Web Responsif digunakan di semua jenis
pengembangan web modern. ECMAScript 5
(JavaScript 5) didukung di semua browser modern.
• Perhatikan baik-baik, terutama fungsi array barunya.
https://www.w3schools.com/whatis/

10. What is
HTML (Hyper Text Markup Language)

11. HTML (Hyper Text Markup Language)

12. HTML Elemen & Attributes

13. A Simple HTML Document

14. HTML Document ...

15. HTML Headings

16. HTML Paragraphs & Links

17. HTML Images & Buttons

18. HTML Lists & Tables

20. Programming HTML & Attributes

21. What is
HTTP (Hyper Text Transfer Protocol)

22. What is HTTP & www ?

23. HTTP Request & Response Circle

24. XHR – XML Http Request

25. STEP 2
Dig Deeper
• Ketika Anda merasa nyaman dengan HTML dan CSS,
inilah saatnya untuk menggali lebih dalam.
• Anda harus mempelajari cara menggunakan Maps, Font,
dan Ikon dalam HTML.
• Di sisi JavaScript, Anda harus mempelajari cara
mengakses DOM HTML.
• Anda juga harus mempelajari cara menggunakan AJAX
dan JSON untuk membuat permintaan server.

26. STEP 3
Choose Frameworks
• Sekarang saatnya untuk melihat beberapa Kerangka kerja
(Frameworks).
• Di sisi CSS Anda harus memilih kerangka kerja untuk desain
web responsif: Bootstrap / Desain Material / W3.CSS
• Di sisi JavaScript Anda harus mempelajari setidaknya satu
kerangka kerja modern: React.js / Angular.js / Vue.js / W3.JS
• Mungkin popularitas jQuery telah melewati puncak, tetapi masih
merupakan kerangka kerja JavaScript yang paling banyak
digunakan.

27. Chart created by GitHub user Kamranahmedse:
https://github.com/kamranahmedse

28. Back-End Roadmap
(Web Development)

29. • Jika front-end adalah yang dilihat pengguna selama
berkegiatan di situs, back-end adalah aspek yang
tidak mereka lihat.
• Back-end developer bertugas untuk mengelola
server situs web, program, dan software, dengan
tujuan agar semua fitur tersebut dapat bekerja
dengan baik.
• Biasanya, back-end developer bekerja dalam
sistem seperti server, sistem operasi, API, dan
basis data. Mereka mengelola kode dalam situs
untuk keperluan keamanan, konten, dan struktur
situs.
2. Back-end development

30. STEP 4
Back-End Roadmaps
https://www.w3schools.com/whatis/

31. Chart created by GitHub user Kamranahmedse:
https://github.com/kamranahmedse

32. SQL is a standard language for accessing
and manipulating databases
https://www.w3schools.com/sql/default.asp

33. 3. Full-stack development
• Full-stack developer bekerja di sisi front-
end dan back-end situs. Mereka
diharapkan dapat membuat situs web,
aplikasi, atau program software dari awal
hingga akhir proses pembangunan.
• Kata “stack” mengacu pada berbagai
teknologi yang akan mereka tangani dalam
satu situs web yang sama, seperti server,
UI, dan lain-lain.

34. 4. Mobile development
• Mobile development adalah jenis web
development yang belum beberapa lama ini muncul.
• Umumnya, jenis pengembangan web ini hadir
sebagai jawaban atas kebutuhan pelanggan yang
lebih senang membuka aplikasi dan situs web
via smartphone mereka.
• Tugas mobile developer adalah membangun aplikasi
yang ramah untuk perangkat seluler
seperti smartphone atau tablet.
• Aplikasi pada mobile memiliki proses operasional
yang berbeda dari situs web dan
program software lainnya.
• Seorang yang ingin berkarier sebagai mobile
developer, membutuhkan seperangkat keterampilan
pengembangan dan pengetahuan tentang beberapa
bahasa pemrograman secara khusus.

35. SUBSCRIBE, LIKE & Share

36. `
www.slideshare.net/kenkanaidi
(Narasumber)
www.ken-spektakuler.blogspot.com
Pemateri Training
e-mail: kanaidi63@gmail.com
Fax. 022-4267749 HP. 0812 2353 284
WA. 0877 5871 1905
Facebook : Kanaidi Ken & Kanaidi Ken Part II
Istagram: kanaidi63 LinkedIn: Kanaidi ken