Pengenalan Dasar Web

Fadlika Dita Nurjanto Upgrading KOMINFO FTI BEM FTI ITS 2013

Biodata Nama : Fadlika Dita Nurjanto TTL : Wonosobo, 9 November 1991 Riwayat Pendidikan:

SD Negeri 2 Wonosobo SMP Negeri 2 Wonosobo SMK Negeri 1 Wonosobo Teknik Informatika ITS 2010

Hobi : Membaca, Berenang, Nggowes Email : fadlikadn@gmail.com

Pengalaman Organisasi Staf Ristek HMTC ITS 2011-2012 Staf Bisnis Kopma dr.Angka ITS 2011-2012 Kadep Humas KMI (Keluarga Muslim Informatika ITS) 2012-2013 Asisten Direktur Humas Kopma dr.Angka ITS 2012-2013 Microsoft Student Partner ITS Periode 2012-2013 Koordinator Administrator Laboratorium RPL, Teknik Informatika ITS 2013-sekarang

Motto : Keberuntungan merupakan pertemuan dari kesempatan dan persiapan, bismillah

Be Carefull!

Rileks, Santai, Fokus

Apa itu WWW, Website??

Seberapa penting website untuk organisasi

www (world wide web) layanan yang digunakan di internet untuk menyampaikan informasi

dengan dukungan multimedia berupa teks, gambar, video dan suara.

website kumpulan halaman dari halaman situs, terangkum

dalam sebuah domain yang berada di dalam www

pengertian website

1991 situs web pertama diluncurkan

1993 www dapat digunakan oleh setiap orang

1994 W3C (World Wide Web Consortium) didirikan

2003 web 2.0

2010 web 3.0

sejarah website

web 1.0

web 2.0

web 3.0

web 1.0 teknologi awal website. server berperan sebagai pembari informasi, client berperan sebagai pembaca. bahasa yang digunakan HTML

web 2.0 the web as platform. pemanfaatan web sebagai sebuah platform aplikasi . harnessing collective intelligence. konten dapat diisi oleh pengguna secara interaktif, contoh youtube. lightweight programming models. pembuatan web menggunakan bahasa yang lebih beragam (html, css, javascript)

web 3.0 the 3D web. mendukung kemampuan visual 3D dan interaksi secara realtime. the media-centric web. photo, audio, dan video menjadi cara lain untuk mencari informasi selain menggunakan keyword.

Jenis-jenis Website

website statis website dinamis

front-end only front-end dan back-end

front-end merupakan halaman website yang dapat diakses oleh pengunjung

back-end biasa disebut CMS (Content Management System), atau disebut juga Administrator Area, Dashboard, dsb

website bersifat statis, konten website tidak dapat diupdate

website bersifat dinamis, di mana administrator dapat mengubah konten dengan leluasa

Contoh Website

news

social network

forum

e-commerce

search engine

detiknews, kompas, BBC, reuters

facebook, twitter, tumblr, wordpress, blogger

kaskus, indowebster, detik forum

tokobagus, berniaga, zalora, bhinneka.com

google, bing, yahoo

Contoh Website (2)

Archive Wikipedia, Google Groups, dll

Blog

Blogspot, Wordpress, Tumblr, dll

Corporate Website

Website ITS, BUMN, Perbankan, dll

Komponen Penyusun Website

web browser web server database server

web editor image editor

Unsur-Unsur Website .com, .org, .or.id, .co.id, .net

http://................................. .com

Ho

sting

HTML, CSS, Javascript

Domain

jagoanhosting, idwebhost, dll

Hosting

HTML, CSS, HTML 5, CSS 3, jQuery

Desain & Scripting

Teknologi Web

HTML

CSS Javascript

CMS

PHP

XML JSON

WEBGL

HTML 5

CSS 3

SQL

ASP.NET

HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

CSS

CSS adalah singkatan dari Casading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konfik style. CSS digunakan untuk mendukung pembuatan website sehingga dapat mempercantik tampilan halaman website.

Javascript

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi client. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup.

element

HTML

CSS

fontcolor : white backcolor : blue textweight : bold width : 100px weight : 40px font-family : calibri

width

height

Relasi antara HTML dan CSS

CMS CMS (Content Management System) merupakan perangkat lunak yang memungkinkan seseorang untuk menambahkan dan/atau memanipulasi (mengubah) isi dari suatu situs Web.

Pemanfaatan CMS : - Website perusahaan, bisnis, organisasi atau

komunitas. - Portal - Galeri foto - Aplikasi E-Commerce. - Mengelola website pribadi / blog. - Dan lain-lain

Kelebihan CMS : Waktu pembuatan website cepat, manajemen data mudah, banyak tersedia template dan plugin yang bisa ditambahkan

WordPress WordPress adalah sebuah perangkat lunak blog yang ditulis dalam PHP dan mendukung sistem basis data MySQL. WordPress dibuat oleh pengembangnya sebagai perangkat lunak weblogging atau blogging. Tetapi seiring perkembangannya, WordPress banyak digunakan sebagai engine utama dalam website-website perusahaan dan organisasi di dunia. WordPress memiliki banyak modul yang bisa ditambahkan, seperti desain template dan plugin yang dikembangkan oleh banyak komunitas. Desain template dan plugin yang ditawarkan beragam, dari yang free sampai yang berharga ratusan dolar.

Langkah-langkah membangun website yang interaktif

- Tentukan tujuan website - Tentukan sasaran target pengunjung website - Rancang Sitemap Website - Siapkan Content Website (gambar, artikel,

identitas website, motto, disesuaikan dengan sitemap)

- Tentukan teknologi website (CMS, Framework, bahasa pemrograman, database, dll)

- Tentukan alamat website (domain). Pemilihan jenis domain, fasilitas, harga, provider domain.

- Tentukan tempat penyimpanan website (hosting). Pemilihan berdasarkan kapasitas (space), bandwith, layanan provider, harga.

Demo Wordpress

Referensi Belajar

W3Schools : http://www.w3schools.com Wordpress : http://www.wordpress.org IlmuKomputer : http://www.ilmukomputer.org Dan banyak lagi..

Sekian, Terima Kasih

Facebook : Fadlika Dita Nurjanto Twitter : @fadlikadn Blog : fadlikadn.wordpress.com