Teknologi Informasi dan Komunikasi. Minggu ke - 4

(1)

Teknologi Informasi dan Komunikasi

(2)

1. Human-Computer Interaction

2. Information Management

3. Networking

4. Platform Techologies

5. Programming

(3)

• What is it?

– Can you define/describe it?

– Human Computer Interaction (HCI = IMK) merupakan studi tentang interaksi antara manusia, komputer dan tugas/ task.

– Bagaimana manusia dan komputer secara interaktif melaksanakan dan menyelesaikan tugas/ task dan bagaimana sistem yang interaktif itu dibuat.

(4)

Why We Are Here

• Look at human factors that affect software design and development • Central Topic: User interface design

– Not just a software interface on a desktop monitor!

(5)

Yang Terlibat Dalam IMK

• Psikologi dan ilmu kognitif : persepsi user, kognitif, kemampuan memecahkan masalah

• Ergonomi : kemampuan fisik user

• Sosiologi : kemampuan memahami konsep interaksi • Ilmu komputer dan teknik : membuat teknologi

• Bisnis : pemasaran

• Desain grafis : presentasi interface • Dan lain-lain.

(6)

Platform Technology

• A platform is a group of technologies that are used as a base upon

which other applications, processes or technologies are developed.

• In personal computing, a platform is the basic hardware (computer)

and software (operating system) on which software applications

can be run. Computers use specific central processing units (CPUs)

that are designed to run specific machine language code. In order

for the computer to run software applications, the applications

must be in that CPU’s binary-coded machine language. Thus,

historically, application programs written for one platform would

not work on a different platform.

(7)

Why ‘They’ Create Platform Tech

• Increased Innovation

• Quicker Response Times

• Reduced Risk

(8)

Programming

• Pemrograman adalah suatu kegiatan menuliskan kumpulan

urutan perintah ke komputer untuk mengerjakan sesuatu,

dimana instuksi tersebut menggunakan bahasa yang

(9)

Manfaat Belajar Pemrograman

• Meningkatkan Kemampuan Berpikir Secara Logis

• Mengembangkan Cara Berpikir Dengan Sistematis

• Melatih Teliti Terhadap Detail

(10)

Web System and Technologies

• Sistem Berbasis Web atau Aplikasi Berbasis Web adalah sebuah

sistem yang dibangun dengan menggunakan konsep

pengembangan berbasis online dan diaplikasikan melalui

media internet atau Intranet.

• Untuk mengembangkan aplikasi berbasis web ada beberapa

bahasa pemrograman yang sering dipergunakan, diantaranya

adalah php, cgi, perl, html, java script dll

(11)

11

• WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP)

• Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan

Internet Browser

• Sintaks HTML mampu memuat konten text, gambar, audio, video dan animasi

(12)

12

• Browser adalah sebuah program aplikasi atau software yang me-request dokumen-dokumen dari komputer-komputer yg terkoneksi internet (server) di seluruh dunia, dan

menampilkan informasi dari dokumen tersebut pd window browser.

• Browser menampilkan sesuai instruksi (format) HTML yg dibuat pd dokumen tsb.

(13)

13

Sejarah World Wide Web

• hypertext [Bush 1945, Nelson 1960’s]

• Awal 90’-an, Tim Berners-Lee, sarjana fisika pd riset Nuklir Swiss (CERN) menciptakan HyperText Markup Language (HTML) dan

• Browser teks pertama: Lynx

• Berners-Lee saat ini memimpin WWW Consorsium (W3C) lembaga yang menyusun standarisasi HTML dan dokumen web.

(14)

14

• 1993: Browser grafis pertama: Mosaic dibuat oleh Andressen dan Eric

Bina (mhs University of Illinois)

• 1994: Andressen kemudian bekerja untuk Netscape, dan membuat

Netscape Navigator, browser grafis populer pertama

• 1995: Microsoft membuat Internet Explorer • Browser saat ini: Mozilla FireFox, Opera, dll

(15)

15

Trend : Fakta

• Browsing / Surfing sudah merupakan aktifitas rutin sehari-hari

• Internet menjadi sumber informasi yang tak terhingga! (apalagi

dengan adanya Om Yahoo! dan Mas Google)

• Jutaan halaman web baru bermunculan setiap hari

• Konten web semakin bervariasi dan dapat dikontribusi oleh

siapa saja dimana saja

(16)

16

Trend: Killer Application

Internet:

• Email

• Online Games

• Chat (mIRC, Yahoo Messenger) • Google Earth

Web based:

• Search Engine (Yahoo!, Google) • Web Blog

• Web Komunitas: Friendster, MySpace, Multiply, Hi5, Yahoo 360°,

(17)

17

Web growth

• Stats from

• Internet Valley,

Inc.

recent estimates suggest 40-50 M Web sites, with 4-5 B Web pages!

Dates Hosts _Domains _Web

Sites Sites/ Hosts July 01 126,000,000 _30,000,000 _28,200,000 _22.381% July 98 37,000,000 _4,300,000 _4,270,000 _12.000% July 97 19,540,000 _1,301,000 _1,200,000 _6.200% July 96 12,881,000 _488,000 _300,000 _2.300% July 95 6,642,000 _120,000 _25,000 _0.400% July 94 3,212,000 _46,000 _3,000 _0.100% July 93 1,776,000 _26,000 ₁₅₀ _0.010% July 92 992,000 _16,300 ₅₀ _0.005% July 89 130,000 _3,900 July 81 210 1969 4 Mosaic Netscape IE

(18)

18

Kategori Web

Berdasarkan keter-update-an isi web:

1. Web Statis : website yang isi tampilannya selalu sama dan

tidak akan pernah berubah kapan pun kita melihatnya. (jika

tidak di-update)

(19)

19

1. Web Statis  HTML (only)

2. Web Dinamis

• HTML plus plus

• + Pemrograman Web (Scripting)

(20)

20

HTML & XHTML

• HTML juga mengalami perkembangan • Versi terakhir: HTML 4.1

• XHTML adalah standar baru untuk HTML yang bertujuan:

• memungkinkan sebuah dokumen web dapat dibaca oleh divais baru seperti PDA, ponsel, dll

• Crossbrowser: ditampilkan sama untuk semua jenis browser • Versi terakhir: XHTML 1.1

(21)

21

HTML

• Walaupun membuat website sangat mudah dengan menggunakan tools, tetapi sintaks HTML harus dikuasai dengan baik.

• Membantu dalam mengembangkan fitur yang dinamis: script, applet, konten multimedia, dll.

• may want low-level control

• may care about size/readability of pages

(22)

22

Pemrograman Web

Client Side Script :

• Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser

client.

• Javascript, VBScript

Server Side Script:

• Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client.

(23)

23

Cara Kerja Web

(24)

24

Pemrosesan Script

Web Browser (Client side processing) HTML JavaScript Java Applets Web Server CGI SSI Servlet PHP JSP ASP

Databases

HTTP Server Side Processing

(25)

25

Client Side Script

• Script yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML.

• Penambahan script ini mempunyai tujuan tertentu. Misalnya: • menampilkan jam dan tanggal yang up- to-date,

• menu yang dinamis (mis: pull down menu), • kontrol terhadap sebuah window,

• animasi sederhana, animasi mouse

(26)

26

Client Side Script

Advantage:

• Waktu proses relatif cepat karena langsung dieksekusi oleh browser client • Tidak memerlukan web server untuk hosting

• Dapat dieksekusi langsung oleh berbagai browser

Disadvantage:

• Script bisa dilihat oleh pengguna • Script dapat di copy-paste

(27)

27

Tips Client Side Script:

• Gunakan untuk proses-proses sisi client

• Script Javascript mudah untuk “dibajak”

• Pelajari bagaimana cara “menambahkan” ke website kita

• Source:

– http://www.dynamicdrive.com

(28)

28

Server Side Script

• Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll

• PHP: open source dan banyak digunakan luas

• Active Server Pages (ASP) dan ASP.Net, teknologi yang dikembangkan oleh Microsoft

• ColdFusion (CFM), dikembangkan oleh Macromedia

• Java Server Pages dan Servlet dikembangkan oleh Sun Microsystem

• Common Gateway Interface (CGI), yang dibuat dengan bahasa pemrograman C++ atau Perl

(29)

29

Server Side Script

Advantage:

• Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-paste • Cocok untuk akses data atau aplikasi database

• Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll

Disadvantage:

• Waktu proses relatif lebih lambat karena dieksekusi oleh server • Memerlukan web server untuk hosting

(30)

30

CSS (Cascading stylesheet)

• CSS adalah bagian dari sebuah website yang khusus dibuat

untuk mengatur tampilan sebuah website.

• Kita dapat mengontrol isi (konten) dan tampilan secara

terpisah.

• Perubahan konten tidak mengharuskan kita melakukan

perubahan tampilan, demikian juga sebaliknya.

(31)

31

CSS

• Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel.

• Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja.

• Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS

(32)

32

Penggunaan CSS saat ini

• Kontrol aspek visual keseluruhan halaman website

• Membuat Layout yang standart (kolaborasi dengan XHTML)

Teknik membuat layout HTML:

• Frame 

cara lama, jarang digunakan

• Tabel  disukai oleh designer

(33)

33

Referensi HTML & CSS

• CSS-1: http://www.w3.org/TR/CSS1 • CSS-2: http://www.w3.org/TR/CSS2 • HTML: http://www.w3.org/TR/html41 • XHTML: http://www.w3.org/TR/xhtml11

(34)

34

Teknologi & Aplikasi Web

ActiveX

• ActiveX adalah sebuah teknologi integrasi bukan sebuah bahasa pemrograman. • ActiveX dapat disebut sebagai lem yang menyatukan berbagai macam kode bahasa

pemrograman sehingga dapat bekerja sama menjadi sebuah aplikasi Internet. • ActiveX mirip dengan OLE (Object Linking and Embedding).