WEB & INFORMATION TECHNOLOGY

1. CSC431 COURSE INTRO
Course Code: CSC431
Course Title: Web Programming
Course Unit: 3
Course Status: Elective for Major, Comp Elective
for Edu.
3 PRACTICAL
TESTS (30)
1 EXAM

2. Course Outline Cont’d
 PART 1: WEB DEVELOPMENT
 PART 2: WEB ENGINEERING
 PART 3: WEB SECURITY
 PART 4: WEB SERVICES

3. Course Outline Cont’d
 PART 1: WEB DEVELOPMENT

 CHAP 1: GENERAL INTRODUCTION
 CHAP 2: HTML
 CHAP 3: FORM DESIGN
 CHAP 4: TABLE DESIGN
 CHAP 5: CSS
 CHAP 6: JAVASCRIPT
 CHAP 7: PHP

4. Web can be regarded as a distributed system
that serves as gateway for disseminating
information and making them available
throughout the existence of application
lifetime.
RELATED
CONCEPTS:
Website: A platform or a particular platform
which enables information dissemination.

6. • ….faster
• ….more convenient
• ….better coverage
• ….global
• ….sustainable
• ….cost effective
• ….higher level of interaction
…….cite more….and archive for exam/test
purposes…..press to move to the next slide!

7. i. Network
ii. Client
iii. Server
iv. Documents
v. Protocol
…let’s examine each…

8. i. Network
This is a link that connects different
computers together to form an
internet.
It is the interconnections/interlinks of
different computers in a typical
topology.
…….next is CLIENT……

9. ii. CLIENT
This has different contextual meanings.
As it relates to this course however, it
refers to the browser. A browser enables
the user to access/communicate with the
web.
Client does the requesting!
…….next is SERVER……

10. iii. SERVER
As the name implies, this
responds/serves the client with the
needed resources.
Technically, we define it as a program
that runs continually with the intent of
responding to the client’s request(s).
…….next is DOCUMENT……

11. iv. DOCUMENTS
These are pages on the web
that provides information to
the users.
…….next is PROTOCOLS……

12. v. PROTOCOLS
These are rules that govern
communication between the
client and the server.
…….that’s OK for now, let’s examine another phase of the
chapter……WEB FORMS

13. • STATIC WEB
• DYNAMIC WEB
…….elaborating……….

14. • It’s the type of web platform in which
the interaction mode is singular.
• That is, the client either does the
viewing or surfing the page(s) in the
web, without NO real respond OR
interaction from the 2nd party.
• This entails purely coding in front
end (e.g. using HTML, CSS etc).
…….DYNAMIC……….

15. • This is the direct opposite of
static web type. It is the type of
web in which interactions take
place between the system and
the client. This is achieved by
coding in backend (e.g. using
PhP, Ruby, Python, Java etc).
...OK, let’s peep into another area of the chapter now...

16. ...Let’s see what it entails...

17. Web Design can simply be defined
as the process involved in designing
web.
The process entails web layout,
content production and graphic
design where necessary.
Web Design: minus FULL IMPLEMENTATION...
…next???

18. Web programming can be defined as a
type of programming that involves
conceptualizing, architecting,
designing, organising, implementing
and maintaining web site/platform for
effective and attractive delivering.
It is an act of coding the designed,
testing and deployment
WP: minus SECURITY empowerment…
…….to crown it all now…

19. Web Development entails
designing, programming and
securing the web.
In other words, web design and web
programming are subset of Web
Development.
What are the processes involved in developing web app?

20. • Requirement analysis and
development plan
• Site Architecture
• Text-only site framework
• Visual Communication
• Site Production
…….details now………

21. • Requirement analysis and
development plan. This deals
with preliminary survey to be
carried out before embarking
on the project.
…….processes continue………

22. • What does the client needs?
• What would my design entails?
• Where am I now?
• What would be the end results
of my product?
• How would I justify the need of
this app?
…….Requirement Questions???

23. • Site architecture: This tells the
type of website you want: static
or dynamic. It also determines
the platform for deployment.
…….processes continue………

24. • Text only site framework: In
this, you develop the skeletal
site of the whole project.; a
kind of rough sketch (on
paper & then to system).
…….what are its elements/components………

25. • Some of the elements/components
needed here include (d majors):
• Content: e.g. the contents of each page.
• Site Map: This talks about the
relationship/link that exists among the
different elements/items on the page.
• Navigation: This describes flow of
movement within the pages.
…….processes continue………

26. • Visual communication and
artistic design. This involves
inserting/placing artistic
designs, image, pictures into
your site.
…….that’s not all, its element/components now………

27. • Note that they must be
communicative and not static (in most
cases). The elements/components of
this process include :
• Look & Feel (e.g. GUI),
• Story Board (updated & linked info),
• Navigation Bar/Button (for movement),
• Logo (talking or descriptive icons), etc.
…….processes continue………

28. • Site production: - This entails all
finishing touches that must be
applied to your web app. Some
of these include……..
…….check them out in the next slide………

29. • Page template
• Prototype template
…….template talks about the background color/design…

30. • Client side program
• Server side program
…client-side: interaction btw d browser/user & d
system/program/app; server-side: interaction btw
d browser/user and the server.

31. • Finished pages
• Validation
…these are confirmation pages; they precede page
submission…

32. • Testing
• Deploying & Maintenance
…after integrating d different pages of d app, d
system/app is now tested as a whole, deployed after
satisfaction of meeting the client’s requirements and
then follow up is made in form of maintenance.

33. • These include:
1) HTML (Hyper-Text Markup Language)
2) XHTML (Extensible ……………………..)
3) CSS (Cascading Style Sheet)
4) JAVASCRIPT
5) DOM (Document Object Model)
6) DHTML (Dynamic ………………………..)
7) SERVER-SIDE SCRIPTING LANGUAGE
8) HTTP (HyperTextTransfer Protocol)
9) IDE (Integrated Development Environment)
10) CGI (Common Gateway Interface)
…….Develop a 5-pages write-up to details the above
technologies (Times New Roman, 10pt, Single-Line).
Mail to: ajayiappdeveloper@gmail.com within a week.

34. • In a typical web app
development, four (4) stages of
development are germane for
building a standard web app:
…….what are they…???

35. • HTML (Hyper-Text Markup Lang)
This involves coding in HTML to
produce web page(s); usually static and
non-interactive information page(s).
…….and the next is…???

36. • CSS (Cascading Style Sheet)
This involves formatting/styling the
web pages to make it more attractive
and appealing to visit.
NB
….still non-interactive but stylistic.
…….and the next is…???

37. • Client-Side Programming
Some level of interactions occur here; as
the client/browser/user is able to
communicate with the app.
NB
….coding in JAVASCRIPT comes here.
…….and the last stage is…???

38. • Server-Side Programming
Greater level of interactions occur here;
as the client/browser/user is able to
communicate with the server. Info/Data
are not only retrieved and read, they
can be submitted/stored.
NB
….coding in PHP, Ruby, Python etc. comes here.
END OF CHAPTER ONE…but…

39.  Follow/Access any of the links:
 https://www.researchgate.net/publication/3166833
62_Intro_to_Web_Prog
 https://www.slideshare.net/AJAYIOlusola/intro-to-
web-prog