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