Creating Effective Web Pages

1
Creating Effective Web Pages

• Creating HTML Documents
• and Enhancing Them with
• Browser Extensions

2
HTML Web Site Management Tools

• Hypertext Markup Language (HTML) a
  nonproprietory markup language that a Web browser
  interprets and uses to display the content as a
  Web page
• It is possible to create a Web site, regardless
  of its complexity, using just Notepad and HTML,
  but
• You must have a thorough understanding of how to
  write all of the tags and attributes required to
  complete the Web site
• It is better to use popular Web site creation and
  management tools
• Microsoft FrontPage
• Macromedia Dreamweaver
• These programs use a graphical user interface
  (GUI) to generate the HTML documents required to
  produce Web pages

3
Limitations of HTML

• Some Web pages include content beyond the
  capabilities of HTML (static document)
• HTML cannot store a graphic but can include a
  reference to (location of) a graphic file
• Other nontext content of a Web page is called by
  a browser in a similar way
• An animated graphic
• Interactive product display
• Number of times a page has been viewed

4
Technology to Produce More Complicated Web Pages

• Scripting language programming language
  executed by a Web browser to extend the
  functionality of a Web page
• Scripting engine requisite feature of a browser
  which translates script code into a format the
  browser can execute
• JavaScript most common (Netscape)
• Can be learned, but complicated
• Free scripts are available on many Web sites to
  download install in your Web pages (more
  complicated ones have to be purchased)

5
JavaScript

• JavaScripts available on the Web
• The JavaScript Source
• JavaScript.com
• What can you do with these scripts?
• Display greeting based on time of day, day of
  week, or a special occasion
• Display current date and time or countdown until
  a specific date and time (like a holiday or grand
  opening)
• Display text scrolling, a drop-down menu of
  selections, or animated buttons that change color
  or display a message when the user points to it
  or clicks the button
• Detect users browser version or open a pop-up
  window with a message
• Add simple or scientific calculator

6
Creating Animated Content

• Browser Extensions allow browser to perform
  tasks it was not originally designed to perform
• Three types of browser extensions
• Plug-in a program that is a software extension
  of a Web browser can only start from within a
  browser not a standalone program stored on your
  computer
• Helper applications - programs installed on
  users computer that browser starts and uses to
  help display or play a file (spreadsheet, media
  player, etc.)
• Add-ons tools that enhance your browsing
  experience, such as 1) toolbars that let you
  access a search engine without opening its Web
  site 2) programs that block pop-up ads and other
  windows from opening when viewing a Web site

7
Commonly Used Browser Extensions
8
Macromedia Plug-Ins (1)

• Flash Player
• Viewer is free and works easily with most Web
  browsers
• Lets browser display simple animations, user
  interfaces, static graphics, movies, sound, and
  text created using this program
• 98 of all internet users have Flash Player on
  their PCs
• Because of its popularity, the latest version of
  Internet Explorer includes Flash Player
• e.g. Coca Cola and BMW

9
Macromedia Plug-Ins (2)

• Shockwave Player
• Viewer is free and works easily with most Web
  browsers
• View animated, three-dimensional interfaces
• View interactive advertisements and product
  demonstrations
• View multiuser games, streaming CD-quality audio,
  and video created by this program
• Uses streaming technology
• Very popular to play games and view animated
  content
• e.g. Timex and Cornell University

10
Comparisons Between Flash and Shockwave

• Flash is used on a smaller scale, for items such
  as simple animations with sound and graphics
• Shockwave is used for more complex applications,
  such as playing an interactive game
• Flash animations load quickly (smaller files)
• Flash is simpler to use and learn, and less
  expensive to buy
• Flash is a more widely distributed plug-in
• Flash is delivered well to various types of
  mobile devices

11
Choosing Image Editing and Illustration Programs

• Computer generated graphics come in two basic
• varieties
• Raster graphics composed of pixels (Microsoft
  Paint Adobe Photoshop Macromedia Fireworks
  Corel Paint Shop)
• Not possible to create layers of content
• Are not scalable
• Image editing programs
• Vector graphics composed of paths (Illustrator
  CorelDRAW and AutoCAD)
• Scalable
• Can layer content (best suited for drawing
  objects)
• Illustration software (more complicated)

12
Choosing a Web Hosting Service (1)

• Best to choose a Web hosting service or Web
  presence provider before beginning work on a Web
  site
• Some Web sites are hosted by private (dedicated)
  Web servers that are managed and maintained by
  the organization that creates the sites
• Other Web sites are hosted by independent ISPs
  that sell shared and dedicated server space to
  small and medium-size businesses

13
Choosing a Web Hosting Service (2)

• Should evaluate your Web sites content and goals
  and understand the tools that will be needed to
  create your Web pages
• Good idea to create a storyboard or navigation
  structure
• Should determine the type of server needed your
  pages may require certain types of processing by
  the server and the server may not be able to
  support your needs
• Any personal or confidential information
  collected requires a secure server, which
  encrypts data
• Web hosting site will require you to purchase and
  use a dedicated server (only one Web site)
• Must also install a server certificate to prove
  to users that the site is actually secure

14
Choosing a Web Hosting Service (3)

• Evaluate amount of storage space your site will
  require (pictures and videos take-up a lot of
  space)
• Determine bandwidth or data transfer potential to
  users
• Hosting sites charge based on file size limits
  and daily or monthly data transfer limits
  exceed this and fees will be higher or site may
  not be able to handle your Web site
• Ensure host site has the technical support
  services that you need

15
Choosing a Web Hosting Service (4)

• Use registrar, such as InterNIC, to check
  availability of proposed domain name many Web
  hosting services offer free domain services with
  an annual service agreement may provide name
  renewal service so your domain name does not
  expire
• Inquire about other services offered, such as
  site statistics, e-mail accounts for the domain
  name, Web site templates, Web site construction
  tools database software, etc.

16
Choosing a Web Hosting Service (5)

• Review Web server hosting services
• Web Site Hosting Directory
• Web Hosting Resources

17
Publishing a Web Site

• Moving your Web site to hosting companys Web
  server
• May have to use FTP but some companies include a
  built-in FTP interface that is part of your
  sites control panel (Web page with all tools to
  access and manage your Web site)
• After publishing, best strategy for maintaining
  Web site is to make any changes to Web file
  stored on your PC (local Web site), then move
  files to the Web server
• This way you have a back-up of your Web site if
  something happens to the remote Web server
• If you make changes directly to remote Web
  server, anyone accessing site may have problems
  with broken links and other problems

18
Search Engine Submission and Optimization

• Promoting Web site
• Be proactive and use tags (a summary of
  the pages contents that a search engine might
  include in its search results)
• Search engine submission process of submitting
  your sites URL to one or more search engines so
  they list your site in their indexes
• Search engine optimization process of
  fine-tuning your site so it ranks well in a
  search engines results when a user searches the
  Web using your sites keywords
• Web sites
• Search Engine Watch
• Meta tag generator