PENDAHULUAN

advertisement
PENDAHULUAN
Yosef Murya Kusuma Ardhana. ST., M.Kom
WWW
▪ World Wide Web atau lebih sering dikenal sebagai Web adalah suatu
layanan sajian informasi yang menggunakan konsep hyperlink (tautan),
yang memudahkan surfer (sebutan para pemakai komputer yang
melakukan browsing atau penelusuran informasi melalui internet).
▪ Keistimewaan inilah yang telah menjadikan Web sebagai service yang
paling cepat pertumbuhannya.
▪ Web mengizinkan pemberian highlight (penyorotan atau penggaris
bawahan) pada kata-kata atau gambar dalam sebuah dokumen untuk
menghubungkan atau menunjuk ke media lain seperti dokumen, frase,
movie clip, atau file suara.
WWW
▪ Web dapat menghubungkan dari sembarang tempat dalam
sebuah dokumen atau gambar ke sebarang tempat di
dokumen lain.
▪ Dengan sebuah browser yang memiliki Graphical User
Interface (GUI), link-link dapat dihubungkan ke tujuannya
dengan menunjuk link tersebut dengan mouse dan
menekannya.
PERKEMBANGAN TEKNOLOGI WEB
▪ Teknologi web mengalami perkembangan yang signifikan
pada kurung waktu 5 tahun terakhir, hampir semua bidang
jasa dan usaha atau bisnis beralih ke website (online).
▪ Bisnis jual-beli merambah ke teknologi web, sebut saja
bukalapak.com, blibli.com, tokopedia.com, olx.co.id dan lainlain
PERKEMBANGAN TEKNOLOGI WEB
▪ Perkembangan Teknologi Web saat ini adalah dimana website
banyak diakses oleh masyarakat melalui handphone atau
smartphone.
▪ Dahulu ketika website diakses melalui handphone atau
smartphone kurang responsive yaitu tampilan dari halaman
website tidak dapat menyesuaikan ukuran layar handphone
atau smartphone.
▪ Teknologi saat ini yaitu website sudah responsive yaitu
halaman website yang halamannya dapat menyesuaikan
layar handphone atau smartphone.
RESPONSIVE WEB
▪ Responsive Web memberikan dampak meningkatnya
pengujung pada website. Berikut beberapa Framework
Responsive Web :
1.
2.
3.
4.
5.
6.
Boostrap Twitter
Foundation 6
Gumby
Skleton
YAML 4
TukTuk
XHTML
▪ XHTML adalah sebuah kombinasi dari HTML dan XML
(Extensible Markup Language) & merupakan bentuk
yang lebih sempurna dibandingkan HTML.
▪ Tujuan XHTML adalah menggantikan HTML. XHTML
adalah bentuk HTML yang didefinisikan sebagai
aplikasi XML yang berarti XHTML berisi semua
elemen dalam HTML 4.01 dikombinasikan dengan
sintaks XML.
XHTML
▪ XHTML adalah bahasa markup sebagaimana HTML,
tetapi dengan gaya bahasa yang lebih baik.
▪ XHTML merupakan versi HTML yang memenuhi
persyaratan XML dan merupakan sebuah dokumen
HTML, dan XHTML menjadi standar internasional
dengan spesifikasi yang ditetapkan oleh W3C (World
Wide Web Consortium).
ALASAN MENGGUNAKAN XHTML
▪ XHTML menyempurnakan kekurangan-kekurangan
pada HTML.
▪ XHTML dapat dijalankan pada berbagai platform,
sehingga memungkinkan website diakses dengan
baik melalui handphone atau smartphone.
PENULISAN XHTML
▪ Cara penulisan XHTML tidak terlalu berbeda dengan
HTML 4.01 standar. Jika sudah mempunyai
kemampuan HTML 4.01 maka akan sangat
membantu untuk memulai XHTML.
▪ XHTML mengharuskan penulisan tag atau script
dengan huruf kecil (lowercase) dan selalu menutup
menggunakan penutup tag.
DEKLARASI PADA XHTML
▪ Deklarasi Doctype pada XHTML hampir sama dengan
Doctype pada HTML. W3C mengharuskan agar selalu
menggunakan Doctype pada XHTML.
▪ Terdapat 3 Jenis Doctype pada XHTML:
1. XHTML - Strict. Digunakan untuk membuat halaman
yang layout dan formatnya dikontrol penuh oleh CSS.
Pada deklarasi ini menggunakan tag font dan table
<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DEKLARASI PADA XHTML
2. XHTML - Transitional. Digunakan untuk membuat halaman
yang sebagian besar menggunakan tag-tag HTML.
Pada XHTML transitional kini elemennya tidak dapat
digunakan lagi karena telah dihapus atau deprecated
<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-traditional.dtd">
3. XHTML - Frame. Digunakan jika kita memakai frame pada
halaman web.
<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Frameset//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DHTML
▪ DHTML atau Dynamic HTML, bukanlah suatu bahasa pemrograman
melainkan merupkan suatu istilah untuk membuat halaman web yang
dinamis dan interaktif dengan mengkombinasikan bahasa markah
HTML, JavaScript, Document Object Model, dan CSS.
▪ DHTML mengijinkan script bahasa pemrograman untuk diubah menjadi
variabel-variabel pada setiap pendefenisian bahasa pemrograman
halaman web, yang menghasilkan efek perubahan tampilan beserta
dengan fungsi-fungsinya setelah halaman web ditampilkan.
▪ Berbeda dengan HTML, yang memiliki kemampuan menghasilkan dan
mengolah halaman web sebelum ditampilkan.
DHTML
HTML5
▪ HTML(HyperText Markup Language)5 adalah sebuah bahasa
markup untuk menstrukturkan dan menampilkan isi dari
World Wide Web, sebuah teknologi inti dari Internet.
▪ HTML5 adalah revisi kelima dari HTML yang pertama kali
diciptakan pada tahun 1990 dan versi keempatnya, HTML4,
pada tahun 1997 dan hingga bulan Juni 2011 masih dalam
pengembangan.
HTML5
▪ Tujuan utama pengembangan HTML5 adalah untuk memperbaiki
teknologi HTML agar mendukung teknologi multimedia terbaru,
mudah dibaca oleh manusia dan juga mudah dimengerti oleh
mesin.
▪ HTML5 merupakan salah satu karya Konsortium World Wide Web
Consortium (W3C) untuk mendefinisikan sebuah bahasa markah
tunggal yang dapat ditulis dengan cara HTML ataupun XHTML.
▪ HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan
XHTML 1.1 yang selama ini berjalan terpisah, dan
diimplementasikan secara berbeda-beda oleh banyak perangkat
lunak pembuat web.
HTML5
▪ WHATWG atau Web Hypertext Application Technology Working
Group mulai membuat standar baru ini pada tahun 2004
ketika Konsortium W3C sedang fokus pada pengembangan
XHTML 2.0 di masa depan, sementara HTML 4.01 belum
pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C
dan WHATWG bekerja sama dalam pengembangan HTML5
setelah W3C mengakhiri Team Kerja Pengembangan XHTML
2.0.[3]
HTML5
▪ Meskipun HTML5 telah dikenal luas oleh para pengembang
web sejak lama, HTML5 baru mencuat pada April 2010
setelah CEO Apple Inc., Steve Jobs mengatakan bahwa
dengan pengembangan HTML5, "Adobe Flash sudah tidak
dibutuhkan lagi untuk menampilkan video atau menampilkan
konten apapun di web."
HTML5
Beberapa APIs terbaru pada HTML5 antara lain :
▪ Elemen canvas, sebagai mode untuk menggambar object dua
dimensi (2D).
▪ Timed media playback.
▪ Media penyimpanan luring (aplikasi web luring).
▪ Penyuntingan dokumen.
▪ Drag-and-Drop.
▪ Cross-document messaging.
▪ Manajemen sejarah kunjungan penjelajah web.
▪ Tipe MIME dan penanggung jawab protokol registrasi.
HTML5
Beberapa teknologi yang juga terkait namun tidak dijadikan
bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5
adalah :
▪ Geolocation
▪ Web SQL Database, media penyimpanan database lokal.
▪ API Database terindeks, mode penyimpanan hierarkis keyvalue (WebSimpleDB).
CSS3
▪ Cascading Style Sheet (CSS) merupakan aturan untuk mengatur
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur
dan seragam.
▪ Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft
Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan
secara bersamaan dalam beberapa berkas (file).
▪ Pada umumnya CSS dipakai untuk memformat tampilan halaman web
yang dibuat dengan bahasa HTML dan XHTML.
CSS3
▪ CSS 3 adalah versi CSS terbaru yang masih dikembangkan
oleh W3C (World Wide Web Consortium). Namun beberapa web
browser sudah mendukung CSS3.
▪ CSS2 didukung seutuhnya oleh CSS 3 dan tidak ada
perubahan, hanya ada beberapa penambahan, sehingga
ketika bermigrasi dari CSS2 ke CSS , tidak perlu mengubah
apapun.
CSS3
CSS 3 memiliki beberapa fitur baru, seperti:
▪ Animasi, sehingga pembuatan animasi tidak memerlukan
program sejenis Adobe Flash dan Microsoft Silverlight
▪ Beberapa efek teks, seperti teks berbayang, kolom koran, dan
"word-wrap".
▪ Jenis huruf eksternal, sehingga dapat menggunakan huruf yang
tidak termasuk "web-safe fonts".
▪ Beberapa efek pada kotak, seperti kotak yang ukurannya dapat
diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut
yang tumpul dan bayangan.
CSS3
TERIMA KASIH
Download