Front end and Back end tools

1
Front-end Development Tools

• Lecture Web Engineering
• BSIT-5th University of Education Okara
• Post questions at question.computingcage.com
• Frontend dev. tools http//fredsarmento.me/front
  end-tools/

2
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

3
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)

4
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

5
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

6
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

7
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
• Adobe Dreamweaver
• Microsoft FrontPage
• SeaMonkey Composer
• And many more http//fredsarmento.me/frontend-too
  ls/
• Adobe GoLive

8
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 ?

9
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

Note wc3 is an international community where
Member organizations, a full-time staff, and the
public work together to develop web related
technologies
10
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_A
  lpha)

11
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?)

12
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

13
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

14
Creating and Documenting an Initial Web Site Plan
Lesson 2Markup Language and Site Development
Essentials

• 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

15
HTML Link Diagram (sitemap)
16
Storyboard
17
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

18
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

19
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

20
Publishing the Site

• To publish a site, you need to know
• The IP address and/or DNS name of the site
• (I dont know my sites DNS name)
• User name and authentication informationlogin
• 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 ?

21
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
• lt!-- Text inside of these brackets will
  not appear --gt
• Use comments to annotate code or document changes

22
Extending HTML
Lesson 3 Advanced Web Technologies

• Client-side and server-side scripting
• Connecting to databases
• Additional ways to apply Cascading Style Sheets
  (CSS)
• Dynamic HTML (DHTML)
• Document Object Model (DOM)

23
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

24
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
• lt?php
• envVars array("HTTP_USER_AGENT")
• foreach(envVars as var)
• print "
• lthtmlgtltheadgtlttitlegtPHP CGI Examplelt/titlegtlt/hea
  dgtltbodygt
• lth1gtHello, World!lt/h1gt
• Your user agent isltstronggtvar.lt/stronggt
• ltbr/gt
• lt/bodygtlt/htmlgt
• "
• ?gt

25
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 CGInew()
• print "Content-type text/html\n\n"
• print "lthtmlgt\nltheadgt\nlttitlegt\nPerl CGI
• Example\nlt/titlegt\nltbodygt\nlth1gtHello,
• World!lt/h1gt\nYour user agent is ltbgt\n"
• print cgi_object-gtuser_agent()
• print "lt/bgt.lt/htmlgt\n"

26
Active Server Pages (ASP) using VBScript

• Microsofts original server-side scripting
  solution
• Example of ASP code using VBScript
• lt_at_ LANGUAGEvbscript gt
• lthtmlgt
• ltheadgt
• lttitlegtASP CGI Examplelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHello, World!lt/h1gt
• lt
• path Request.ServerVariables("PATH_INFO")
• pagename Request.ServerVariables("HTTP_HOST")
• method Request.ServerVariables("REQUEST_METHOD
  ")
• browser Request.ServerVariables("HTTP_USER_AGE
  NT")
• user Request.ServerVariables("REMOTE_ADDR")

27
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)

28
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

29
C

• Object-oriented
• Compiled
• Platform-dependent
• Used for Microsoft .NET program

30
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

31
Server Side Includes (SSIs) (contd)

• 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

32
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

33
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

34
JavaScript (contd)

• lthtmlgt
• ltheadgtlttitlegtMy Pagelt/titlegtlt/headgt
• ltbodygt
• ltscript language"JavaScript"gt
• document.write('This is my first ?
• JavaScript Page')
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

35
VBScript

• Microsofts 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

36
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

37
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