Font-End Development Tools

Lecture: Web Engineering
BSIT-5th University of Education Okara
Post questions at question.computingcage.com
Frontend dev. tools: http://fredsarmento.me/frontend-tools/
Front-end Development Tools

Objectives
• Distinguish between using a text editor (notepad++) and using
a GUI markup language editor (Dreamweaver)
• Identify Web page design issues
• Identify front-end and back-end Web issues
BSIT-5th,UEOkara,
question.computingcage.com
2

Lesson1: Creating Web Pages
• The need for skills in Web-based technologies:
• Contribute to team projects
• Create Web pages
• Create résumés
• You must know at least the following markup languages:
• Hypertext Markup Language (HTML)
• Cascading Style Sheet (CSS)
• Extensible HTML (XHTML)
BSIT-5th,UEOkara,
3

Additional Web Page Elements
• Web pages use more than HTML or XHTML -- additional
technologies include:
• Flash
• (macromedia or shockwave flash for multimedia and animations)
• Java
• Preferably java scripts and JSP (server side)
• ActiveX
• software framework created by Microsoft that adapts its
earlier Component Object Model (COM)
• Introduced in 1996 and commonly used in its Windows OS
• You must also understand how Web pages use:
• Databases
• [any student should practically connect webpage with database]
• Common Gateway Interface (CGI)
• Detail on next slide
BSIT-5th,UEOkara,
4

CGI (server side)
• CGI is used for many purposes:
• To help Web pages pass information to and from databases
• To provide active content (e.g., hit counters)
• Examples of CGI technology include:
• Perl, PHP, ASP, JSP, .NET
• Server-Side JavaScript (SSJS), ColdFusion = google
BSIT-5th,UEOkara,
5

Text Editors & Markup Languages
• You do not need to use a special editor application to create
markup
• You can use a simple text editor (e.g., Notepad or Vi)
• When creating HTML or XHTML files, you must:
• Save the file using either the .html or .htm file name extension
BSIT-5th,UEOkara,
6

GUI HTML Editors
• GUI HTML editors:
• Create HTML/XHTML code for you
• You type page text as you would with a standard word processor
• You point and click with a mouse
• Examples:
1. Adobe Dreamweaver
2. Microsoft FrontPage
3. SeaMonkey Composer
4. And many more: http://fredsarmento.me/frontend-tools/
5. Adobe GoLive
BSIT-5th,UEOkara,
7

Front-End Issues
• A Web page is an interface that should:
• Provide a distinct message
• Be accessible by all users
• Incorporate appealing images and graphical elements
• Include constantly updated hyperlinks
• Use tables wisely ?
• Present carefully designed Web forms (how?)
• Connect pages to databases securely
• Use the most current technologies appropriately
• Use images sparingly (why)
• Be easily navigable and without dead ends
• Include alternative navigation ?
BSIT-5th,UEOkara,
8

Web Page Accessibility
• An accessible Web page has:
• A user-friendly and accessible front end (see pics =1,2,3,4)
• Back-end server resources that process and store user input
• The WC3 estimates that up to 10 percent of people have disabilities
that, if not accommodated by Web sites, can cause companies to lose
significant amounts of revenue (usability issue)
• Why adhere to accessibility standards?
• It makes your site available to all users
• You can be penalized for failing to provide accessibility, either by
losing customers or through government-imposed fines
BSIT-5th,UEOkara,
9
Note: wc3 is an international community where Member organizations, a full-time staff, and
the public work together to develop web related technologies

Wiki Site
• A Web site that allows all visitors to collaborate in its construction
• Wiki software is installed on a Web server
• You can lock down certain pages and leave others open to editing
• Wiki examples
• Wikipedia (www.wikipedia.org)
• LinuxQuestions.org (http://wiki.linuxquestions.org/wiki/Main_Page)
• MemoryAlpha (http://en.wikipedia.org/wiki/Memory_Alpha)
BSIT-5th,UEOkara,
10

Back-End Issues
• Database connectivity
• Types of databases
• Web servers use relational databases to store data
• Relational databases
• Creating relational databases
• Relational database vendors
• Databases, Web servers and SQL (who will tell?)
BSIT-5th,UEOkara,
11

Naming Web Page Files
• Web servers search for default page names
• Default page names include:
• index.html
• index.htm
• default.htm
• default.asp
• Readme.txt [why to hide?]
• Default page names can change from server to server
• Apache Server -- usually index.html
• IIS -- usually default.htm, default.html or index.html
BSIT-5th,UEOkara,
12

HTTP 404 – File Not Found
Error
• Indicates that a user has requested a file that does not
exist on the specified Web server
• Generated by the server
• Can be customized
BSIT-5th,UEOkara,
13

CreatingandDocumentinganInitialWebSitePlan
• Site plan is a rough outline of planned development
• Site diagram (sitemap), see: html link diagram on next slide
• Storyboard
• Eventually becomes a site map for completed site
• Determining audience and message
• Validating design issues
• Consider issues such as central message, fonts, images, colors, ethnic
and cultural diversity, and common color schemes
BSIT-5th,UEOkara,
14
Lesson 2:
Markup Language and Site Development
Essentials

HTML Link Diagram (sitemap)
BSIT-5th,UEOkara,
15

Storyboard
BSIT-5th,UEOkara,
16

Obtaining Relevant Input from Stakeholders
• Stakeholders are relevant organization employees or contributors who can
provide or help determine:
• The purpose of the Web site
• The services that the audience requires from the site
• Development timelines
• As you work with stakeholders:
• Remember that non-technical people may be asked to approve your
project
• You must translate technical issues into non-technical language
• Team members can include representatives from marketing, IT, sales and
other areas of your organization
BSIT-5th,UEOkara,
17

Developing the Site
• As your team develops the site, you will be engaged in various
activities:
• Creating markup code
• Testing functionality
• Approving the site
• Publishing the site
BSIT-5th,UEOkara,
18

Testing Pages in Multiple Browsers
• As you develop Web pages, test them using multiple Web
browsers
• Different generation of the same browser may interpret HTML
somewhat differently
• Browser vendors also implement standards differently
• Browser types include:
• Microsoft Internet Explorer
• Mozilla Firefox
• Netscape Navigator
• Lynx
• Opera
BSIT-5th,UEOkara,
19

Publishing the Site
• To publish a site, you need to know:
• The IP address and/or DNS name of the site
• (I don’t know my site’s DNS name)
• User name and authentication information[login]
• The destination directory (i.e., folder) on the Web server
• Space requirements [web hosting]
• The protocol you will use to upload the site [ftp]
• Working with service providers [?]
BSIT-5th,UEOkara,
20

Good Coding Practice
• Create code that can be easily read by others
• Exceptions:
• Some code might encounter problems if it includes random spaces
• Always test your code in multiple browsers and validate it
• Adding hidden comments:

• Use comments to annotate code or document changes
BSIT-5th,UEOkara,
21

Extending HTML
• Client-side and server-side scripting
• Connecting to databases
• Additional ways to apply Cascading Style Sheets (CSS)
• Dynamic HTML (DHTML)
• Document Object Model (DOM)
BSIT-5th,UEOkara,
22
Lesson 3: Advanced Web Technologies

Server-Side Languages
• Attributes of server-side language:
• Code is executed by the Web server, not the Web browser
• Code executes because an interpreter has been installed and activated
on the Web server
• Server-side scripts are used for various purposes:
• Browser detection
• Database connectivity
• Cookie creation and identification
• Logon scripts
• Hit counters
• File uploading and downloading
BSIT-5th,UEOkara,
23

PHP Hypertext Preprocessor (PHP)
• An interpreted server-side scripting language for creating dynamic Web
pages
• Embedded in HTML pages but usually executed on a Web server
• Example of PHP code:
<?php
$envVars = array("HTTP_USER_AGENT");
foreach($envVars as $var)
{
print "
<html><head><title>PHP CGI Example</title></head><body>
<h1>Hello, World!</h1>
Your user agent is:<strong>${$var}.</strong>
<br/>
</body></html>
";
}
?>
BSIT-5th,UEOkara,
24

Practical Extraction and Report Language
(Perl)
• Another server-interpreted language
• Older, but very popular
• Example of Perl code:
#!/usr/bin/perl
use CGI qw/:all/;
$cgi_object = CGI::new();
print "Content-type: text/htmlnn";
print "<html>n<head>n<title>nPerl CGI
Examplen</title>n<body>n<h1>Hello,
World!</h1>nYour user agent is: <b>n";
print $cgi_object->user_agent();
print "</b>.</html>n";
BSIT-5th,UEOkara,
25

Active Server Pages (ASP) using VBScript
• Microsoft’s original server-side scripting solution
• Example of ASP code using VBScript:
<%@ LANGUAGE=vbscript %>
<html>
<head>
<title>ASP CGI Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<%
path = Request.ServerVariables("PATH_INFO")
pagename = Request.ServerVariables("HTTP_HOST")
method = Request.ServerVariables("REQUEST_METHOD")
browser = Request.ServerVariables("HTTP_USER_AGENT")
user = Request.ServerVariables("REMOTE_ADDR")
BSIT-5th,UEOkara,
26

Java
• Object-oriented
• Compiled
• Platform-independent
• Marketing: Write once, run anywhere
• Reality: Write once, test everywhere
• Java can be used to write:
• Stand-alone applications
• Servlets
• JavaServer Pages (JSP)
BSIT-5th,UEOkara,
27

Visual Basic
• A compiled programming language developed by Microsoft
Corporation
• Used for stand-alone applications and server-side Web
applications
• Once only procedural, now has object-based elements
BSIT-5th,UEOkara,
28

C#
• Object-oriented
• Compiled
• Platform-dependent
• Used for Microsoft .NET program
BSIT-5th,UEOkara,
29

Server Side Includes (SSIs)
• An instruction inside of an XHTML/HTML page that directs the
Web server to perform an action
• An alternative to CGI
• SSI instructions are in SGML
• Can be used to:
• Place the results of a database query into a page
• Execute other programs
• Indicate the last time a document was modified
• Insert footer text at the bottom of a page
• Add the current date as a timestamp to a page
BSIT-5th,UEOkara,
30

Server Side Includes (SSIs)
(cont’d)
• Standard SSI file name extensions:
• .shtml
• .shtm
• SSI support in Web servers
• Most Web servers include code that enables SSI
• However, the SSI feature may be disabled
• You may have to activate the feature
• You may also have to define a MIME type
BSIT-5th,UEOkara,
31

Client-Side Languages
• Issues with client-side languages
• Some clients do not support JavaScript or any other such
scripting language
• Users can deactivate script execution in browsers that
normally support it
BSIT-5th,UEOkara,
32

JavaScript
• Object-based
• Adds interactivity to Web pages
• Can also be used on the server side (Server-Side JavaScript, SSJS)
• On the client side, can be used to:
• Detect browsers
• Create cookies
• Create mouse rollovers
• JavaScript advantages
• Platform-independent
• Vendor-neutral
• Relatively simple
• JavaScript and cookies
• Cookies are stored on the hard drive
• Cookies can be used to:
• Store passwords
• Store user preferences
• Choose which Web pages will be displayed based on browser version
BSIT-5th,UEOkara,
33

JavaScript (cont’d)
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first 
JavaScript Page');
</script>
</body>
</html>
BSIT-5th,UEOkara,
34

VBScript
• Microsoft’s answer to JavaScript
• Can be used on the client side or the server side
• If used on the client side, only Internet Explorer can render
the script
BSIT-5th,UEOkara,
35

Connecting to a Database
• For a database to work, you must:
• Provide a way for the Web server and database to recognize each
other
• Microsoft systems can use ODBC
• Other methods include PHP scripts
• Provide permissions to the database so it can be read and/or
written to
• You must also supply SQL scripts
BSIT-5th,UEOkara,
36

One mark assignment
• Identify the standards organization that controls markup
languages
• Design a web architecture of your own topic
• Define the concepts of creative design and demonstrate their
importance to business
BSIT-5th,UEOkara,
37

Font-End Development Tools

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (6)

Similar to Font-End Development Tools

Similar to Font-End Development Tools (20)

More from university of education,Lahore

More from university of education,Lahore (20)

Recently uploaded

Recently uploaded (20)

Font-End Development Tools