Pengantar Teknologi Web 3

Antonius Rachmat C
Teknologi Web Client
• Web browser
• HTML / XML / XHTML
• Javascript / VBScript
• CSS
• Flash player
• Java Applet
• ActiveX / Plugin: program yg terintegrasi dgn browser
• Helper: program yg terinstall di client
Pengembangan sisi client
• Local environment (prosesor, browser, memory, vga, dll)
• Tidak ada kontrol oleh web developer
• Memberikan saran kepada user
– Cth: resolusi 1024 x 768
• Memberi pilihan kepada user
– Cth: javascript harus aktif
• Client / user profiling
Pertimbangan Client
• Kebutuhan dan keinginan user berbeda satu dengan yang lain.
• Pengaruh gender, umur, pendidikan, hobi, pengalaman, latarbelakang, budaya, dll.
• User memiliki tujuan, tugas web developer adalah membantu user mencapai tujuannya (download program, akses jadwal, mencetak daftar harga, dll)
Pertimbangan jaringan
• Bandwidth
– Modem = 56KBps; T1 = 1.5MBps
• Latency: waktu yang diperlukan sebuah paket data untuk menempuh jarak yang menghubungkan dua buah sistem
• Utilization, lalu lintas data pada suatu jaringan.
Web Browser
• MS Internet Explorer (Windows)
• Netscape Navigator/Communicator (Windows & Linux)
• Mozila Firefox (Windows & Linux)
• Opera (Windows & Linux)
• Konqueror (Linux)
• lynx, berbasis teks (Linux)
HTML
• Hypertext Markup Language
• Text based
• Menggunakan tag (tanda) < dan >
• Tujuannya: untuk tampilan di halaman web
• Bahasanya baku
• Ekstensi : .html , .htm



Tags vs. elements
• HTML specifies a set of tags that identify structure and content type
– tags are enclosed in < >
• specifies an image
• most tags come in pairs, marking a beginning and ending an HTML element is an object enclosed by a pair of tags
• is a TITLE element
• This text appears bold. is a BOLD element
•

Part of this text is bold.

» is a PARAGRAPH element that contains a BOLD element
• enclose the title of a page
• HTML document is a collection of elements (text/media with context)

























Frame controversy
• frames are probably the most controversial HTML feature
– some people love them, some people hate them
– 2 reasonable uses for frames
– as a navigational aid:
• can divide the screen into a static menu frame and the main frame for navigating a site
• e.g., www.creighton.edu/~davereed
– as a means of separating program input from output:
• can divide the screen into a static man input form frame and the main frame for displaying output
• e.g., www.creighton.edu/~davereed/csc551/JavaScript/story.html





External style sheets
• modularity is key to the development and reuse of software
– design/implement/test useful routines and classes
– package and make available for reuse
– saves in development cost & time
– central libraries make it possible to make a single change and propogate
• external style sheets place the style definitions in separate files
– multiple pages can link to the same style sheet, consistent look across a site
– possible to make a single change and propagate automatically
– represents the ultimate in content/representation separation


Web rules of thumb
• HTML provides for lots of neat features,
but just because you can add a feature doesn't mean you should!
– don't add features that distract from the content of the page
? use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts
? use images only where appropriate
e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of buttons or links can slow access
? don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained
? don’t be annoying
e.g., no pop-up windows, excessive advertising, silly music
? break large document into smaller or provide a menu (either internal or frame)
? stick to standard features and test using both IE and Netscape
? utilize style sheets to make changes easy & ensure consistency

Pengantar Teknologi Web 2

Web Architectures & Technologies
WWW
• Software
• Kumpulan service Internet, yaitu web-web yang berada di layer aplikasi
• Ditemukan oleh Tim Berners-Lee dkk di CERN
• Didesain untuk membantu para ilmuwan di CERN untuk memperoleh informasi dari dokumen-dokumen di Internet
• Tujuannya: membuat software (browser) untuk menampilkan informasi tersebut
– Idenya: hyperlink
WWW
• The world wide web consortium (W3C) definition of the web: "The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge"
• Provides information access in ways not previously possible
– Hyperlinked (Hypertext)
– Graphical user interface
– Pictorial and non-text information
– Information that changes rapidly
– Immediate access
– Anyone can author a web site
– Multi-user access to the same information (try that with a book)
– Easily searchable information
WWW Components
• Structural Components
– Clients/browsers – to dominant implementations
– Servers – run on sophisticated hardware
– Caches – many interesting implementations
– Internet – the global infrastructure which facilitates data transfer
• Semantic Components
– Hyper Text Transfer Protocol (HTTP)
– Hyper Text Markup Language (HTML)
• eXtensible Markup Language (XML)
– Uniform Resource Identifiers (URIs)



------
























Web Architecture
• Layering Aspect
– “Separation of concerns”
– How many concurrent users are you serving?
– Shared needs among multiple applications? (e.g., security)
• Data Aspect
– What kind(s) of data are you delivering?
• Structured vs non structured
• On-demand vs. real-time
– What are the bandwidth requirements?
• Size & nature of data
• Again, audience concerns
Tiers…?
• A “tier” can be hardware, software, or logical. The last is the most sensible option from an architectural viewpoint.
• Therefore:
– A non-application-specific client (such as a web browser) is not a tier
– A database with no overlying data access layer is not really considered a tier either











the three roles
• the Model contains data that represents the problem
• the Controller responds to user actions by telling the Model how to change
• the View displays the current state of the Model to the user
how do we design it?
• the Model is a class that represents the actual problem being solved
– it has private fields, and provides accessor (getter and setter) methods
– the Model should always be a separate class
• if using a GUI
– the listeners collectively are the Controller
– the displayed components are the View
– the Controller and View are thus a little bit interdependent
Combining Controller and View
• Sometimes the Controller and View are combined, especially in small programs
• Combining the Controller and View is appropriate if they are very interdependent
• The Model should always be independent
• Never mix Model code with GUI code!
– why?
• ANSWER: you may be required to change the View
• if you keep View and Model separate, changing the View will be relatively simple






MVC Separation
• Separating the presentation from the model
– Presentasi dan model memiliki fokus yang berbeda:
• presentasi ke tampilan, model ke data.
– Perbedaan ketergantungan:
• presentasi bergantung pada model tapi tidak sebaliknya.
– Sehingga dapat mengembangkan multiple presentation dengan model yang sama
• Separating the controller from the view
– Contoh: .NET Web application
– File: *.aspx dan *.aspx.vb
• Contoh: PHP Zend Framework, Code Igniter





Planning A Web site
• Purpose
– Purpose and Goal
– Target Audience
– New Web Technologies
– Web site comparison
• Content
– Value-added contents
– Text
– Images
– Color Palette
– Multimedia

PENGANTAR TEKNOLOGI WEB

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Pengantar Teknologi Web10

Content management systems

Latar Belakang
• Kebutuhan pembuatan website yang cepat, mudah
• Kemampuan programming web yang tidak baik
• Tipe website yang berbeda-beda jenisnya
– Personal web, berita
– Blog, katalog, galeri foto
– Pendidikan, e-commerce
• Butuh CMS
Contoh kebutuhan
• Sebagai contoh jika kita ingin membuat situs artikel (berita), adanya fasilitas article, komentar dari user pada article, new dari publisher, pertanyaan dari user, dan jawaban dari pertanyaan
• Bisanya kita membuat 6 table untuk menampungnya (articles, comments on articles, news, comments_on_news, questions, answers )
Masalah
• Yang jadi masalah adalah cara untuk programming nya
• Lebih banyak script yang dibutuhkan untuk:
– User-experience: melihat directory content dari table tertentu, melihat satu kategori tertentu, melihat item terbaru menambahkan item baru dll
– Admin-experience: approve, disapprove item, delete item, dll delete item, dll
• Banyak membuat statement SQL yang sama untuk tiap table-nya
• Banyak index untuk tiap table-nya


Masalah (2)
• Mengapa data article misalnya tidak disimpan dalam bentuk HTML files dalam direktori?
• Programer menggunakan text editor, designer menggunakan web design tool dan FTP untuk upload, dll
• Bila salah script yang diupload bisa merusak sistem
• Sulit untuk pengaturan authentication
• Maintenance static html sulit

Masalah (3)
• Mudah untuk membuat dan me-maintain website jika:
– Orang yang sama adalah publisher, author, dan programmer
– Site terdiri atas sedikit pages
– Tidak ada yang peduli terhadap konsistensi halaman
– Tidak ada yang peduli terhadap versioning control
• Tetapi tidak demikian dengan kondisi yg ada
– Pekerja dipecah menjadi: publisher information, designer,graphic designer author, dan programmer
– Site terdiri dari ribuan pages
– halaman harus konsisten (dengan themes)
– Versioning control is critical
Tugas

• Publisher menentukan topik dari content utama yang ada yg ada
• Information Designer menentukan navigational link dari pages, bagaimana menyajikan content, dan graphic design apa yang dibutuhkan
• Graphic Designer mempunyai kontribusi untuk membuat drawing, logos,artwork services, mock-up template (static html) yang dibutuhkan information designer
• Programmer membangun production template dan program logic program logic
• Editor melakukan approve content
Website maintenance



What is a Content Management System?
• Sebuah sistem yang memberikan kemudahan kepada para penggunanya dalam mengelola dan mengadakan perubahan isi sebuah website dinamis tanpa sebelumnya dibekali pengetahuan tentang hal-hal yang bersifat teknis.
• Setiap orang, penulis maupun editor, setiap saat dapat menggunakannya secara leluasa untuk membuat, menghapus atau bahkan memperbaharui isi website tanpa campur tangan langsung dari pihak webmaster.
• A tool to separate content from presentation


CMS
• A CMS is a software system used to manage content, including web content, images, audio files, etc.
• Used for storing, controlling, versioning and publishing websites.
• Files are available over the web
• Output the knowledge management process
• Concern with medium
• Editable content
CMS
• CMS helps to organize, control, and publish documents and multimedia content


How does a CMS work ?
Basic information flow
1. Template is designed
2. Content is entered as plain-text or HTML into database
3. Content is placed in a template for display to the end user



CMS components


CMS mengurangi web maintenance


CMS workflow


Apa yg bisa dilakukan CMS?


Yang dapat dilakukan CMS
• allows non-technical staff the ability to update web site content without knowing HTML, FTP, etc.
• easy-to-use WYSIWYG tools, similar to Word (code view as well)
• individuals who have natural responsibility for content can maintain that content themselves
• archiving / backup / recovery
• content more likely to be kept up-to-date (set review reminders)
• consistent visual identity
• Manajemen data
• Mendukung web template dan standarisasi

Integration of blogs/RSS
• Many systems supply own blogging software
• Many can interoperate with popular blogging software such as moveable type
• Many include software for parsing RSS feeds, or syndicating our own content

CMS “jelek” jika…


CMS arsitektur


CMS contents
• Simple pages for normal presentation
• Complex pages, with specific layout and presentation
• Dynamic information sourced from databases and will change on regular time intervals
• Training material
• Online manual
• General business documents
• Thousands of pages in total for different categories of customers
• Extensive linking between pages
Fitur web CMS
• Easy content editing
• Preview before publishing
• Extandable functionality
• Templates
• Version management
• Different user levels
• Automatic system update
• Searching
Easy content editing


Preview before publishing


Extandable functionality


Templates


Version Management


User level


System update


Jenis CMS
• CMS komersial
• CMS open source
– Joomla, Mambo, Drupal, phpCMS - general
– Wordpress – blog
– phpWiki - wiki
– Moodle - pendidikan
– phpBB, phorum – forum
– Maian events – calendar
Dan lain lain
• CMS implementation challenges