Web Application and Web Interfaces Application

1. NATIONAL WORKSHOP ON
WEB INTERFACES AND WEB
APPLICATIONS
Organized By:
HUMAN AND RURAL DEVELOPMENT SOCIETY
(HARDS) Venue:
Institute of Modern Sciences and Arts (IMSA)
Gull Center, Hyderabad
Master Trainer:
Engr. Liaquat Ali Rahoo
(M.Sc(CS, MBA(HRM), MCSE)
Collaboration With:
•Mehran University of Engineering & Technology, Jamshoro
•Pakistan Library Club
•Institute of Modern Sciences and Arts
•Vighio Soft Solutions
•Hashmi Digital Printers

2. Website
 A web page is a document, typically written in
plain text interspersed with formatting
instructions of Hypertext Markup Language
(HTML, XHTML). A web page may incorporate
elements from other websites with suitable
markup anchors.
 Web pages are accessed and transported with
the Hypertext Transfer Protocol (HTTP), which
may optionally employ encryption (HTTP
Secure, HTTPS) to provide security and privacy
for the user of the web page content. The
user's application, often a web browser,
renders the page content according to its HTML
markup instructions onto a display terminal.

3. Web Technologies Introduction
Web Technologies are playing the leading
role in the World Wide Web includes many
latest evolutions in it like Web Services,
Web 2.0, Tableless Design, HTML, XHTML,
XML, CSS 2.0 etc.
Web technology aims to enhance
creativity, secure information sharing,
collaboration and functionality of the web.
Web Technologies have been developing
since last 15-20 years and are still ….
Web 2.0,Web 3.0 are the main
revolutionary Technologies of it.

4. Evolution of Web 2.0
• The term first became notable after the
O'Reilly Media Web 2.0 conference in 2004.
• Initially in 1996 Web 1.0 was introduced by
same O’Reilly Media, which was not user
friendly platform having many difficulties to
search or share and also even retrieve
information.
• Web 2.0 is the new and revolutionary change
that is sweeping the Web and allowing users
to interact with the data available there in
ways we never dreamed possible 10 years
ago.
• The explosive growth and mind-blowing rapid
pace of changes in the technology has

5. Web 2.0’s latest technology amendments
• Social Networking Websites:
Social networks connect people at low cost. This can be
beneficial for entrepreneurs and small businesses
looking to expand their contact base. The social
network sites focuses on building online communities
of people who share interests and/or activities.
• Video Sharing Websites:
Video sharing refers to websites or software where users
can distribute their video clips. Some services may
charge, but the bulk of them offer free services.
• Wiki’s:
A wiki is a collection of web pages designed to enable
anyone who accesses it to contribute or modify
content, using a simplified markup language.

6. Features of Web 2.0
Web 2.0 websites typically include some of the
following features/techniques.
1.Searching.
2.Linking.
3.Authoring.
4.Taging.
5.Signals.
6.Higher Education.
7.Also for Government Officials.
Rules to be followed iinn ccrreeaattiinngg aa WWeebbssiittee::
1. The CONTENT of your site must be interesting and worthwhile.
2. The site must be easy to navigate.
3. Optimize Your Graphics.

7. Let’s Have a brief look at Web
• WWeebb 11..00:: Web 1.0 connects people to a public,
shared environment — World Wide Web. But Web 1.0
essential does not facilitate direct communication
between web readers and writers.
• WWeebb 22..00:: Web 2.0 not only connects individual users
to the Web, but also connects these individual uses
together. It fixes the previous disconnection between
web readers and writers.
• WWeebb 33..00:: Semantic Web, when it is realized, will
connect virtual representatives of real people who use
the World Wide Web. It thus will significantly facilitate
the exploration of web resources.

8. Static website
 A static website is one that has web pages
stored on the server in the format that is sent to
a client web browser. It is primarily coded in
Hypertext Markup Language, HTML.
 Simple forms or marketing examples of
websites, such as classic website, a five-page
website or a brochure website are often static
websites, because they present pre-defined,
static information to the user. This may include
information about a company and its products
and services via text, photos, animations,
audio/video and interactive menus and
navigation.

9. Dynamic website
• A dynamic website is one that changes or
customizes itself frequently and automatically,
based on certain criteria.
• Dynamic websites can have two types of
dynamic activity: Code and Content. Dynamic
code is invisible or behind the scenes and
dynamic content is visible or fully displayed.

10. Blog
• Sites generally used to post online diaries
which may include discussion forums (e.g.,
blogger, Xanga). Many bloggers use blogs like an
editorial section of a newspaper to express their
ideas on anything ranging from politics to religion
to video games to parenting, along with anything
in between. Some bloggers are professional
bloggers and they are paid to blog about a certain
subject, and they are usually found on news sites.

11. Why Websites?
Offline Apps vs. Online Apps
ONLINE APPS
• No need to install
• Just login and use
• Available from anywhere where Internet
connection is available
• Operating system independent
• No piracy issues

12. Why Websites?
Offline Apps vs. Online Apps
OFFLINE APPS
• Ease of use
• Generally have more features
• Easier to develop but difficult to update

13. Technologies Overview
List of Technologies
Client Side Technologies
• HTML, CSS, JavaScript, VBScript
• XHTML, DHTML, WML, AJAX
• FLASH
Server Side Technologies
• ASP, PHP, Perl, JSP
• ASP.NET, Java
• MySQL, SQL Server, Access

14. Technologies Overview
List of Technologies
Some More Advanced Technologies
• XML, XSLT, RSS, Atom
• X-Path, XQuery, WSDL
• XML-DOM, RDF
• Ruby on Rails, GRAIL Framework
• REST, SOAP

15. How to choose a Technology?
Depends on:
• What is the type of content?
• Who is your audience?
• Who will modify your content?
• What are your Future Plans?
• Availability of technology?
• Your previous experience?
• Portability and Data sharing

16. HTML (Hyper Text Markup Language)
• Documents
– Document = page = HTM file = topic
– Content (text, images)
– Tags (display commands)
• Other terms
– Window: browser display window
– URL: Uniform Resource Locator
– Hyperlink: hypertext jump to a resource
– Resource: URL, image, mailto, external file

17. HTML
HTML pages are tag-based documents
• Really plain ASCII text files
• Don't look like documents they represent
• Tags indicate how processing program should
display text and graphics
• Processed by browsers “on the fly”
• Tags usually appear in pairs
• Most have reasonable names or mnemonics
• Most can be modified by attributes/values

18. That’s how this…
<html>
<head><title>Welcome onboard</title></head>
<body bgcolor=“#f4f4f4">
<h1>Welcome</h1>
<img src=“dcetech.gif" width=“222" height=“80" alt=“DCETECH"
BORDER="0“ />
<h2>A Message from the Speaker </h2>
<p><font color=red>Good evening! Thank you for coming here!
</font></p>
<p>Hello and welcome to Web technologies workshop! I'm <b>Ankit
Jain,</b>, 4th year Computer Engg <a
href=“http://dcetech.com"> Head DCETECH.COM </a>. Dcetech is a
student portal and only one of its kind in India.It is not
only a technical oriented site which caters only for engineers
but its for students from any background! Also students from
any educational institution can register and join Dcetech.
</p>
. . .
</body>
</html>

19. Turns into this…

20. Some HTML Tags example
• START TAG END TAG
• <HTML> </HTML>
• <HEAD> </HEAD>
• <TITLE> </TITLE>
• <BODY> </BODY>
• <H1>, <H2>, ... </H1>, </H2>, ...
• <IMG ...> </IMG> (optional)
• <A ...> </A>
• <P> </P>
• <BR/> (none; "empty" tag)
• <OL> </OL>
• <UL> </UL>
• <LI> </LI>

21. Basic Structure of HTML document
Example of basic tag positioning
<html>
<head>
<title>Title bar text</title>
</head>
<body>
<p>Look, I'm a paragraph!
</p>
</body>
</html>

22. Some Common Text Tags
• Heading levels
– h1 – h6, numbers inverse to text size
<h1>Heading One</h1>
<h2>Heading One</h2>
• Paragraph
– Probably the most common tag
<p>Yada yada yada...</p>
• Line break (an empty tag)
– Used when <p>'s white space not wanted
This line will break<br>right there
• Note white space or lack thereof in HTML
source does not matter!

23. Ordered & Unordered Lists
• Ordered (numbered)
– Use <ol>...</ol> tags
• Unordered (bulleted)
– Use <ul>...</ul> tags
• List Items make up both lists
– Use same <li>...</li> tags
• Lists can contain almost anything
– Text, images, paragraphs, links
– Even other (nested) lists, same type or not

24. Attributes and Values
• Properties, traits, or characteristics that modify
the way a tag looks or acts
– Usually in pairs: <body bgcolor="teal">
– Sometimes not: <option selected>
• Most HTML tags can take attributes
– Format of value depends on attribute
– width="150" ... href="page3.htm" not
width="page3.htm" ... href="150"

25. The Anchor Tag (1)
• The tag that puts the HT in HTML
– <a> ... </a> (useless by itself)
– Must have attributes to be useful
• HREF (Hypertext REFerence) attribute
– Makes a jump to someplace (URL)
<a href="mypage.htm">My Page</a>
<a href="www.google.com">Google</a>
– Link text is underscored by default
• Whatever is between <a> and </a>
is hot (clickable)
– Clicking makes the link go somewhere
or do something

26. Images (2)
• Main attribute: SRC
– Tells page where to find the image
– File name can be local, relative, or full
– Case sensitivity depends on server
– Animated GIFs added same as static
<img src="smiley.gif">
<img src="./pix/mypic.jpg">
<img src="http://www.myweb.com/mail.gif">

27. Tables (1)
• Powerful, flexible information delivery
– Used to reflect or impart structure
• A table is a container
<table> ... </table>
• That contains other containers (rows)
<tr> ... </tr>
• That contain other containers (cells)
<td> ... </td> (data cells)
<th> ... </th> (heading cells)
• That contain data – or other containers
– Text, graphics, lists, even other tables!

28. Tables
<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table> Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

29. CSS Concepts
• Styles are named sets of formatting commands
– [18pt, Arial, left aligned] "Section head"
– [Bold, italic, blue] "Glossary term"
– [Normal, 10pt, Verdana] "Body text"
– [Italic, orange, small caps] "Bob"
• Style sheets are control documents that are
referenced by content documents
– MS Word, other editors & desktop publishing
programs have done it for years
– DOT : DOC :: CSS : HTM

30. Why Use CSS?
• HTML formatting is awkward and imprecise
– Originally intended to deliver well organized
text (aimed at structure, not formatting)
– Over time, formatting elements were added
that solved some problems, but created many
more
• W3C proposed Cascading Style Sheets
– Separate format from content
– Enforce consistency
– Greatly simplify control & maintenance

31. What's "Cascading" All About?
• Three places to put style commands
– External: Affects all documents it's attached to
– Internal: Affects only document it appears in
– Inline: Affects only text it's applied to
• Cascading means styles' "pecking order"
– Precedence is: Inline > Internal > External
– Seems backward, but it couldn't work any
other way; for example…
– Picture a document whose style sheet specifies
Verdana as the font, with one paragraph style
in Courier New, with one bold word or phrase

32. What Can CSS Control?
• Almost everything
– Page background, colors, images, fonts and
text, margins and spacing, headings,
positioning, links, lists, tables, cursors, etc.
• W3C intends CSS to "…relieve HTML of the
responsibility of presentation."
– Translation: "Don't bug us for new tags;
change existing tags & make your own using
CSS."
• Idea is to put all formatting in CSS
– To that end, many tags are "deprecated" by
CSS: <font>, <basefont>, <center>,
<strike>…

33. Coding CSS Rules
• Rules have very specific parts and syntax
– Rules have two basic parts: selector and
declaration
– Declaration also has two parts: property and
value
rule
h2 { font-style : italic ; }
property value
selector declaration
– Selector tells the rule what to modify
– Declaration tells the rule how to modify it

34. CSS Rule Placement
• In a separate .CSS file
– Affects all pages to which it is linked
– .CSS referenced by pages with <link> tag
• In the <head> of an .HTM page
– Affects only page in which it appears
– Rules are coded in <style></style>
container
• In an HTML tag in page <body>
– Affects only text to which it is attached
– Declarations are coded as attribute= "value"
pairs, e.g., style="color: blue;"

35. Linking To An External CSS
• Do not put <style></style> tags in the .CSS file;
this will prevent it from working
• Add CSS rules as needed; break lines where
necessary; format as desired
• Save as filename.css
• Reference .CSS in <head> of .HTM(s)
<head>
<link rel="stylesheet" type="text/css"
href="mystyles.css">
</head>

36. Adding Styles To A Single Page
• Within document's <head>, insert a
<style></style> container
• Code rules exactly as you would in an external
.CSS
<head>
<style>
h2 { font-style: italic; color: red; }
p { font-family: "Verdana, Arial, sans-serif";
font-size: 12pt;
color: blue; }
</style>
</head>

37. Adding Styles To An HTML Tag
• Within a tag's < >, code an
attribute = "value" pair defining style
characteristics
– Tip: Watch out for nested quotes
<h1 style = "font: small-caps bold italic;
font-family: 'Verdana, Arial, sans-serif';
color: #008080; text-align:
center;">Gettysburg Address (First
Draft)</h1>
<p style = "font-family: Times;
color: #800000; font-weight: bold;">
Four score and seven beers ago…</p>

38. JavaScript
• What JavaScript isn’t
– Java (object-oriented programming language)
– A "programmers-only" language
• What JavaScript is
– Extension to HTML (support depends on
browser)
– An accessible, object-based scripting language
• What JavaScript is for
– Interactivity with the user:
* input (user provides data to application)
* processing (application manipulates data)
* output (application provides results to user)

39. Usage of JS
• Direct insertion into page (immediate)
<body><p>Today is
<script>document.write( Date() );
</script></p>
• Direct insertion into page (deferred)
<head>
<script>
function dwd()
{
document.write( Date() );
}
</script>
</head>
. . .
<body>
<p>Today is <script>dwd(); </script></p>

40. PHP
• Procedural language
– Compare with JavaScript which is event-driven
• C-like syntax - { } ;
• Extensive Function Library
• Good Web-server integration
– Script embedded in HTML
– Easy access to form data and output of
HTML pages
• Not fully object-oriented
– Java is fully object oriented – all functions
have to be in a class
– In PHP, classes are additional but quite
simple to use

41. PHP
– PHP scripts are essentially HTML pages with
the occasional section of PHP script.
– PHP script is enclosed in the tag pair:
• <?php print date(“H:I”) ?>

42. Conclusion & Future Work
• Most Web pages – remote or local – are a
combination of those technologies
– Raw content, placed inside…
– HTML tags, formatted with…
– CSS rules, interactivity produced by…
– JavaScript scripts on Clients sides and…
– PHP scripts on server sides
• Newer technologies like DHTML, XHTML, and
XML are based on these
– A little knowledge now can prepare you for
new technologies!

43. Questions