Download tp 2543 pengaturcaraan web - FTSM

Saidah Saad
Blok E-3-22
[email protected]
[email protected]
03-8921 6668
CLIENT
User interface
HTML(content) +
CSS (presentation)
AJAX/DOM
+ JavaScript
(Interactivity)
SERVER
PHP Script
(Interactivity)
Database
Web
Server
 Course
Name
• Pengaturcaraan Web (Web Programming)
 KOD
• TP 2543
 STATUS
• Lengkap Jabatan (TP)
 APPROACH
• Student Centered Learning
Di akhir kursus, pelajar mampu:
At the end of the course, students will be able to:

Menyenarai fungsi sistem pengaturcaraan berasaskan web
List down the functions of web-based programming systems;

Merangka struktur asas pengaturcaraan web
Design the basic structure of web programming;

Menganalisis konsep dan teknik untuk mereka bentuk laman web
Analyze the concept and technique of web page design;

Membangunkan laman web yang menarik dan dinamik.
Build dynamic and attractive functional websites;

Mengaplikasi pendekatan pelayan pelanggan dalam pembangunan
laman web
Apply client server approach in developing websites
Aktiviti
Kuliah
Tugasan / Makmal
Kuiz
Membuat Projek kumpulan ( 5 orang / kumpulan)
 Sistem pemantauan berdasarkan pembangunan blog
group ahli
 berdasarkan 5 tahap metodologi pembangunan web
 Menjana 5 laman berkonsepkan pembangunan 'three
tier' (1/ahli)
Pembelajaran sendirian
Menduduki peperiksaan akhir semester
Jumlah
Jam
Pertemuan
21
20
1
36
44
2
123
Item
Peratus
Projek / Project
40
Tugasan/ Assignment
15
Kuiz/ Quiz
15
Peperiksaan Akhir Semester
30
TOTAL
100
Week
2
Topics
Introduction to Course and SCL
Element Web 2.0
 intro to web 2.0 tool and element
HTML
3
CSS
4
JavaScript
5
DOM
6
Web Server
7
PHP
1
9 -13
14
Project (SCL Based)
Revision
Dietal, H.M, Dietal, P.J & Nieto, T.R 2008. Internet &
World Wide Web: How To Program. 4th Ed. New
Jersey, Prentice Hall.
 Sebesta R.W. 2010. Programming The World Wide
Web. 6th Ed. Addison Wesley, USA.
 Carey, P. 2006. HTML, XHTML and Dynamic HTML. 3rd
Edition. Boston, MA, United States, Thomson.
 Ullman, L. 2005. PHP and MySQL for Dynamic
WebSites. 2nd Ed. Barkeley, CA :Peachpit Press.
 Marty Hall & Larry Brown. 2001. Core Web
Programming. 2nd Ed. Saddle River, New Jersey. A Sun
Microsystems Press/Prentice Hall PTR Book.

 Monday
8:00 am – 10:00 am
• Slaid lecture : SPIN
 Lab
• Source such as youtube, website, documents : BLOG
• Discussion : BLOG

1 – Kumplulan FTSM ( hari : ??? Jam : ???)


16 orang ( 3 kumpulan kecil)
2 – Kumplulan FSSK ( hari : ??? Jam : ???)

25 orang ( 5 kumpulan kecil)
http://tp2543web.blogspot.com
http://www.ftsm.ukm.my/azraai/tp2543/index.html
 http://evolutionofweb.appspot.com/

The term Web 2.0 is associated with web applications that
facilitate participatory information sharing, interoperability, usercentered design, and collaboration on the World Wide Web. A Web
2.0 site allows users to interact and collaborate with each other in
a social media dialogue as creators (prosumers) of usergenerated content in a virtual community, in contrast to websites
where users (consumers) are limited to the passive viewing of
content that was created for them. Examples of Web 2.0 include
social networking sites, blogs, wikis, video sharing sites, hosted
services, web applications and folksonomies.



The rule-making body of the Web is the World Wide Web
Consortium (W3C).
W3C puts together specifications for Web standards.
The most important W3C standards are:
• HTML (HyperText Markup Language)
• XHTML (EXtensible HyperText Markup Language)
• CSS (Cascading Style Sheets)
• XML (EXtensible Markup Language)
• XSL (eXtensible Stylesheet Language)
• DOM (Document Object Model)




Web 1.0 focused on a relatively small number of
companies and advertisers producing content =
“brochure web”
Web 2.0 involves the user. Web 1.0 is as a lecture and
Web 2.0 is a conversation.
Many Web 2.0 companies are built almost entirely on
user-generated content and harnessing collective
intelligence.
Google, MySpace, Flickr, YouTube and Wikipedia, users
create the content, while the sites provide the platforms.
17

The user is not only contributing content and developing
open source software, but directing how media is delivered,
and deciding which news and information outlets you trust.
• Social bookmarking sites such as del.icio.us and
ma.gnolia
• Social media sites such as Digg or Reddit
• Social networking, MySpace, Facebook, Bebo, LinkedIn,
and Second Life
• Web 2.0 businesses leverage the Long Tail
 Long Tail = economic model in which the market for
non-hits could be significant and sometimes even
greater than the market for big hits
 Web development technologies = Ajax, XHTML, Cascading Style
Sheets, JavaScript, the Document Object Model, XML and the
XMLHttpRequest object and popular Ajax toolkits—Dojo and
Script.aculo.us
 Rich Internet Applications (RIAs)—web applications that offer the
responsiveness and rich GUI features of desktop applications
 Key tools for building RIAs = Adobe’s Flex, Microsoft’s Silverlight,
ASP.NET Ajax and Sun’s JavaServer Faces
 Other Web development tools and technologies = Adobe’s
Dreamweaver, JSON, the web servers IIS and Apache, MySQL, PHP
and ASP.NET
 Web services allow you to incorporate functionality from existing
applications into your own applications quickly and easily.
• Amazon Web Services
• Google Maps web services
19
• eBay web services


Key to success for many of today’s leading Web 2.0
companies = user-generated content
• articles
• home videos
• Photos
Collective Intelligence
• Collaboration can result in smart ideas
20


Wikis
• Allow users to edit existing content and add new
information
• Wikipedia
• MediaWiki open source software
• SocialText
 Using wikis for project collaboration reduces e-mails and
phone calls between employees, while allowing the ability
to closely track a project’s changes
Collaborative Filtering
• Users might submit false or faulty information
 Wikipedia  people deliberately adding false information
to entries
 Web 2.0 companies rely on the community to help police
their sites
 Collaborative filtering lets users promote valuable
material and flag offensive or inappropriate material




Blog
Social Networking (e.g. facebook)
Social Media (e.g YouTube)
Tagging

http://oreilly.com/web2/archive/what-is-web-20.html

http://en.wikipedia.org/wiki/Web_2.0

http://en.wikibooks.org/wiki/Web_2.0_and_Emerging
_Learning_Technologies/Web_2.0_Tools




http://www.go2web20.net/
http://edutechwiki.unige.ch/en/List_of_web
_2.0_applications
http://technologyties.pbworks.com/f/web20
_list.pdf
http://www.web20searchengine.com/web20
/web-2.0-list.htm
1.
Surveying the Possibilities
2.
Developing a Website Evaluation Tool
3.
Colour Theory in Web Design and Selecting a Colour Scheme
4.
Organizing a Website
5.
Methodology of web development
Source :
http://www.washington.edu/accessit/webdesign/student/lesso
ns.htm#unit1

Theme : E-Commerce
 Paper
work / proposal about project
 Dateline : 5 March 2012
 Content – title / group name, member / summary
about project / introduction / objective / target
audience / analysis requirement , design, content /
milestone / reference
 Group
: 5 members + 1 blog


http://www.opencart.com/index.php?route=demonstration
/demonstration
http://www.zen-cart.com/