Engr. Liaquat Ali Rahoo (M.Sc(CS, MBA(HRM), MCSE) • Mehran University of Engineering & Technology, Jamshoro • Pakistan Library Club • Institute of Modern Sciences and Arts • Vighio Soft Solutions • Hashmi Digital Printers NATIONAL WORKSHOP ON WEB INTERFACES AND WEB APPLICATIONS Collaboration With: Institute of Modern Sciences and Arts (IMSA) Gull Center, Hyderabad Organized By: HUMAN AND RURAL DEVELOPMENT SOCIETY (HARDS) Venue: Master Trainer:
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Engr. Liaquat Ali Rahoo (M.Sc(CS, MBA(HRM), MCSE)
•Mehran University of Engineering & Technology, Jamshoro•Pakistan Library Club•Institute of Modern Sciences and Arts•Vighio Soft Solutions•Hashmi Digital Printers
NATIONAL WORKSHOP ON WEB INTERFACES AND WEB
APPLICATIONS
Collaboration With:
Institute of Modern Sciences and Arts (IMSA)Gull Center, Hyderabad
Organized By:
HUMAN AND RURAL DEVELOPMENT SOCIETY (HARDS)
Venue:
Master Trainer:
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.
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.
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 compelled the business world to integrate for the latest technology amends."
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.
Features of Web 2.0Web 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 in creating a Website: Rules to be followed in creating a Website: 1. The CONTENT of your site must be interesting and worthwhile.2. The site must be easy to navigate.3. Optimize Your Graphics.
Let’s Have a brief look at Web
• Web 1.0: Web 1.0: 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.
• Web 2.0: Web 2.0: 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.
• Web 3.0: Web 3.0: 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.
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.
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.
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.
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
Why Websites?Offline Apps vs. Online Apps
OFFLINE APPS• Ease of use• Generally have more features• Easier to develop but difficult to update
Server Side Technologies• ASP, PHP, Perl, JSP• ASP.NET, Java• MySQL, SQL Server, Access
Technologies OverviewList of Technologies
Some More Advanced Technologies• XML, XSLT, RSS, Atom• X-Path, XQuery, WSDL• XML-DOM, RDF• Ruby on Rails, GRAIL Framework• REST, SOAP
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
• Other terms– Window: browser display window– URL: Uniform Resource Locator– Hyperlink: hypertext jump to a resource– Resource: URL, image, mailto, external file
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
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>
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>
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 wantedThis line will break<br>right there
• Note white space or lack thereof in HTML source does not matter!
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
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"
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)
– Link text is underscored by default• Whatever is between <a> and </a>
is hot (clickable)– Clicking makes the link go somewhere
or do something
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
– 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)
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>
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
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”) ?>
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