Web based School
|
During the last three weeks, you have absorbed a lot of information about the
creation of web pages and components to include in your Web-based application. You
should now possess the knowledge to be able to create a variety of essential items
to build the killer app. Given this newfound ability, how in the world are you going
to manage the plethora of files that you develop for your application? This lesson answers that question by presenting the robust site management tools
that are included with Visual InterDev. These tools contain some highly integrated
features that can help you organize your site and create order out of chaos. The first lesson for the Chapter teaches you about the Link View. You will learn how
to use the powerful view to get a handle on all of the files contained in your web
site. Next, you will learn how to leverage your web site development to other Web-based
applications and sites that you create. Visual InterDev provides some powerful features
for copying portions of all of your web site to other directories or web servers.
The lesson then demonstrates the proper management of the different files contained
in your web site, including web pages, databases, images and multimedia, and other
objects and components. The final lesson for the Chapter teaches you how to use the features
of Visual InterDev to repair broken links within your web site.
The Link View presents a new way to look at your web. This exciting and powerful
feature enables you to truly get a handle on all of the files that are contained
in your Web-based application. The Link View provides a graphical tool that enables
you to visually examine the files within your web site and their relationships. You
have the ability to expand or contract the view to explore different aspects of your
site. For example, you may want to focus solely on a certain section or group of
web pages or objects. The Link View gives you the power to pick the right view for
your needs. In addition to viewing the relationships, you also can use the Link View
to identify the file types for each of the items in your application. This feature
includes everything from HTML web pages to Java applets. In short, the Link View
provides a rich, graphical tool to help you conceptualize the design of your web
site.
The Link View not only presents a comprehensive picture of your web site, it also
enables you to interact with your web site objects from within its view. Figure 18.1
illustrates the power of the Link View as it graphically displays a sample web site. This illustration depicts a highly robust web site that includes just about every
type of file imaginable for a Web-based application. You can see that graphical icons
depict the file type for each item in the view, while lines and arrows indicate the
relationship between the files. The arrows and circles located at the ends of the
lines serve as visual indicators that describe the nature of the relationship. A
circle next to an object indicates that it is the parent, and the arrow next to an
object signifies that it is the child. From Figure 18.1, you can determine that the HTML web page named internal.asp
is the parent of all of the surrounding files. You can describe the relationship
another way by stating that the global.asp. file is the child of the internal.asp
web page. In other words, the ASP file is a part of the web page. As with every relationship,
you will have times when the communication link is broken. The Link View graphically
displays these broken links in red, indicating that there is a problem. You can use
the Link View to see both links to objects within your web site as well as links
to external sites such as a news server or a site on the Web. Getting a clearer picture with the Link View. The Link View enables you to see a multitude of files, including HTML web pages,
images and sound files, ActiveX controls, Java applets, and HTML layout files. You
can basically examine any file that is a part of your web site using the Link View.
From the Link View, you can then select and edit an object using its default editor.
You also can choose to browse a web page from within this view and filter the Link
View to see only the files of a certain type. This filter enables you to work with
a discrete number of files contained in your web site, thereby simplifying the site
management process. The object contained in the middle of Figure 18.1 appears with a large icon, while
all of the surrounding items display with smaller icons. The large icon signifies
that the developer opened a Link View for this object. You will learn more about
opening a Link View in the next section.
You can view a web site object using the Link View by selecting the file in the
Visual InterDev project workspace and clicking the right mouse button to display
the shortcut menu, as shown in Figure 18.2. You can then select View Links from the shortcut menu to display a Link View for
the file. Figure 18.3 depicts the Link View for the default web page used in the
Dos Perros sample application included with Visual InterDev. Opening a file with Link View. Viewing the links. As you can see, the Default.asp consists of several GIF images, an HTML
layout file (cover.alx), and several additional HTML files. The link to the CPYRIGHT.asp
file appears in red, indicating that the link to this file is broken. You should
notice that the icon for this file is red and appears broken. When you open a file
to view its links, the Link View initiates a verification process that gathers information
on all of the object's associated files, including their file type and the nature
of their relationship to the selected object. Figure 18.4 demonstrates the state
and appearance of the associated files as they progress through the verification
process. The visual progression of an object. The file located at the top of the illustration represents a file whose relationship
link hasn't been determined. Notice that it looks grayed out. After the Link View
verifies the relationship, the icon is either displayed in its natural color, indicating
that the link has been verified and established, or the icon appears red and broken,
signifying that the link relationship has been broken. You can open a Link View on any object that appears within the Link View diagram.
This feature enables you to drill down to obtain a picture of your web site's hierarchy.
To accomplish this task, select the desired object within the Link View diagram and
right-click the mouse button. The shortcut menu will be displayed for the object,
enabling you to select View Links, as shown in Figure 18.5. Drilling down on your web site. Once you select the View Links menu item, a Link View diagram is created, enabling
you to view the selected object and its related files, as depicted in Figure 18.6. Viewing another object's links. You also can view the links for any URL address by choosing the Tools menu and
selecting View Links on WWW. You are then prompted to enter a URL address for the
web page that you want to see in the Link View. This feature is helpful when you
want to examine the structure of a web site without having to open the project within
Visual InterDev. You can use this feature for your own internal intranet addresses
as well as for external Internet URL addresses. Figure 18.7 depicts a Link View diagram
for the Microsoft home page. Viewing the links for a URL on the Web.
The Link View enables you to filter the amount and type of information displayed
in your diagram, so you can more easily decipher and understand your web site structure.
You can choose Filters from the View menu to display a menu list of available filter
choices as depicted in Figure 18.8. As you can see, Visual InterDev provides many choices to filter the objects that
are displayed within your Link View diagram. Table 18.1 provides an explanation for
each of the filter options that are available. Selecting a filter for your Link View.
You can use any of these filters to limit the types of files that are displayed
in your Link View diagram. Initially, all of the available items will be enabled.
Selecting a filter option from the list toggles the choice on and off. For example,
in order to show only images and multimedia files in your diagram, you would need
to turn off all of the other filter choices by selecting them. Figure 18.9 depicts
the decision to display only multimedia files and how that affects the view of the
default page for the Dos Perros application.
Viewing the images.
The default Link View diagram displays all of the primary links for the selected,
or expanded, object. Primary links consist of those objects that are directly related
to the expanded object. You also can choose to view the secondary links within your
diagram. These links identify the relationships that exist between the objects that
are displayed in the diagram. For example, several web pages may share the use of
an image that is displayed on all of the pages. For the sake of example, call the web pages Page1, Page2, and Page3 and the image
Shared.gif. Page1 is the default page for the web site and contains the Shared.gif
image and links to Page2 and Page3. If you opened a Link View diagram for Page1,
the primary relationships for Page1 would exist with Page2, Page3, and Shared.gif.
The secondary links would exist between Page2 and Shared.gif and between Page3 and
Shared.gif. Figure 18.10 logically depicts these relationships. Conceptualizing primary and secondary links. New Term: A primary link represents
a direct relationship between an expanded object and one of its associated objects. New Term: A secondary link indicates
a relationship between two or more of the associated objects for an expanded object. Now that you understand the concept of primary and secondary links, it's time
to look at a live example in the Link View. You can display the secondary links for
an expanded object by clicking the Show Secondary Links icon on the Link View toolbar,
as shown in Figure 18.11. After you have selected this option, the secondary links for the expanded object
are displayed in the diagram.
Choosing to view the secondary links. Figure 18.12 illustrates the primary and secondary links for the Dos Perros default
page. Viewing the primary and secondary links. The common denominator in this diagram is the page, which is shared
among the three web pages. As you can tell, the link to this page is still broken.
You learn how to repair this link during the final lesson for the Chapter.
The purpose of opening a Link View for your objects is to examine and understand
the structure and relationships that exist within the web site. Upon further review
of your site, you may want to interact with the objects contained in the diagram.
The Link View enables you to directly access the object and activate the default
editor for one or more objects. When you select an object in the diagram, the diagram
changes to reflect the link relationships for this object, in addition to the originally
expanded object, as shown in Figure 18.13. Selecting an object. Once the object is selected, you can click the right mouse button to display the
shortcut menu. For example, Figure 18.14 depicts the shortcut menu for an HTML Layout
file. Opening the object from within the Link View. Figure 18.14 displays the menu options that are available for all Link View objects.
The Preview in Browser option is disabled, because you can't view HTML Layout files
in a browser. Table 18.2 lists and describes each of these options.
As you can see from the illustration, the selected .alx file is opened using the
HTML Layout Editor, enabling you to make changes to the layout. Editing the object. You have just learned how to select and edit a single object. You can also select
multiple objects in the Link View diagram by holding down the Ctrl (Control) key
and clicking the left mouse button on each object that you want to select. After
you have made all of your selections, you can click the right mouse button to choose
an action. For example, you may want to open and work with an image and a web page
at the same time. You can select both the image and the HTML web page file from within
the Link View and choose Open. Both of these objects are opened with their respective
default editors, enabling you to make any necessary changes. Another example involves expanding the links for your objects. You may want to
expand the links for a portion or all of your web site to gain a comprehensive look
at its structure. In this case, you could individually select the objects using the
previously described method, or you can choose Select All from the Edit menu to select
all of the items in the diagram. Then, you can select Expand Links from the shortcut
menu to display the links for all of the selected objects.
The ability to interact instantly with your objects from within the Link View
provides a significant time-saver to your development effort. Whether you want to
preview the design of a web page or directly modify an image file, Visual InterDev
truly promotes the idea of an integrated development environment through the implementation
of this feature.
One of the biggest challenges that businesses and IT departments face is how to
leverage their current investment. Executives want to capitalize on the investments
that are made in people, knowledge, or technology. A project isn't worth investing
in if there's no return on the investment (ROI). For those of you who see dollar signs as the only rate of return, let me be quick
to point out that there are other investment returns that can be just as valuable
as financial returns. The kind of return that I am talking about includes financial
gain but also includes return on people, knowledge, and technology. You can apply
this measure to any type of project. Certainly the project should translate into
financial gain for the company or organization, but the people who work on the project
should be better equipped at the end of the project than when they started. Also,
the individuals and the company or organization should possess a richer knowledge
base after completing the project. Finally, you should be able to leverage the technology
for future endeavors. This technology return is what this part of the lesson focuses
on. Now, you may ask what this has to do with Visual InterDev. Well, Visual InterDev
helps you leverage your technology investment in two significant ways. First, you
can use the power of Visual InterDev to augment your productivity for a single Web-based
application development effort. Second, you can leverage the functionality of your
applications across multiple Web-based projects. Both of these methods involve the
ability within Visual InterDev to copy an entire web site. The lesson describes the
two methods and then demonstrates how to use this powerful feature.
Visual InterDev contains a powerful feature that enables you to copy an entire
web site to another location. This section describes how you can capitalize on this
feature to facilitate and streamline your application development process. The lesson
on Chapter 3, "Design and Development Considerations," explained the concepts
of a development, testing, and production environment. You learned how these three
environments can be used to make your project team more effective. The basic premise
behind creating these environments involves the staging of your application. As you
progress through your development effort, you need to provide separate environments
that represent the different stages of your application. These concepts apply whether
your development team consists of the well-known, three-person team of me, myself,
and I, or a team of 50 people. First, you need to create a development environment that supports the initial
design and development of your Web-based application. Next, you need to create a
testing area that reflects individually tested modules. This testing environment
supports the integration testing of all of the components within your application. This development stage is the final checkpoint before the application is released
to the users. By having a separate testing environment, you can separate modules
that are still being worked on versus those that have been adequately tested. In
this way, you can ensure that individual developers don't hinder the work of their
cohorts. The third stage is represented by the production environment. This environment
supports the use of your web site by its constituents. This environment contains
your fully tested Web-based application and separates the work of the developers
from the users. Modules that are still being developed won't cause the user's version
of the application to crash, because they operate in separate worlds. Figure 18.16
illustrates the concept of these three environments. Visual InterDev supports the use of these environments by enabling you to copy
your entire web site across the different environments. Given that you have established
a unique directory structure for each site, you can use Visual InterDev to promote
your site between each stage of development. You also could copy the web site to
a different machine. In this way, you can ensure that all of the components in your
web site are migrated properly without your having to identify and copy the individual
files contained in your site. You will learn how to take advantage of this feature
in one of the following sections, "Copying a Web Site."
You also can use the copying feature across multiple projects. Invariably, you
will want to use prior web sites as a starting point for future development efforts.
By so doing, you don't have to reinvent the wheel every time you develop a Web-based
application. You can use the Copy Web feature to copy the web site to a new location
and then begin tailoring the components to meet the needs of your new application.
Again, Visual InterDev enables you to leverage your prior investment in technology
for the future by providing a starting point for new projects. The three phases of development.
Now that you understand the context of this feature, you can learn how to actually
execute this feature. The Copy Web feature enables you to copy an entire web site
to another server or to the same server with a new name.
To copy a web site, select Copy Web from the Project menu to display the Copy
Web dialog window. Figure 18.17 illustrates the options that are available on this
window. Copying a web site. The name of the web site that is being copied displays in the top portion of this
dialog window. From this window, you can enter the name of the destination server
as well as a name for the web site that you are copying. You can enable a Secure
Sockets Layer (SSL) connection by clicking the checkbox next to this option. The options at the bottom of this window enable you to customize what is being
copied. First, you can choose to copy only the changed files. This option is useful
when you have initially copied a web site to the destination and you are copying
an updated version to the destination. This option can be applied to the three stages
of application development, when you are constantly migrating updated versions of
your application from development to testing and from testing to production. You
save a lot of time during the application promotion process by selecting this option,
because only the files that have changed are copied to the destination location. The Add to an existing Web option is similar to the one that you have used to
create new projects. You can choose to add this web to an existing site or create
a new web for this site.
The Copy child webs option is enabled only if you are copying the root web. In
this case, you can check this option to copy all of the child webs that exist within
the root web. After you confirm your entries and click OK, the web is copied to the new destination,
and you receive a friendly confirmation notice like the one shown in Figure 18.18. A successful copy. The newly copied web site assumes the security settings of the root web on the
destination server machine. You must create a Visual InterDev project to access the
copied web site. To do this, begin the Web Project Wizard and enter a name for your
new project. After you click OK, the Web Project Wizard is initiated, enabling you
to enter a server name for your web, as shown in Figure 18.19. Specifying a server. After you have chosen the server, you can click the Next button to proceed to
the second step in the process. You will see the name of the project that you are
creating as well as an option to connect to an existing server. Click this radio
button and choose the name of the web that you entered during the Copy Web phase
of this process. Figure 18.20 demonstrates this process for a web that was copied
as a new web called TestComponents. You can then click Finish to complete the process and create a new Visual InterDev
project for the copied web as shown in Figure 18.21. Connecting to a newly copied web site. Reviewing the results: New project, old web. This process is very intuitive and straightforward. In a nutshell, it involves
two major steps--copying the web site, and creating a new project for the newly copied
web site. This feature definitely removes the headache of migrating your Web-based
applications as well as helps to increase your ROI.
Visual InterDev supports many of the same Windows Explorer functions manipulating
files and folders within your project. The File View resembles the Explorer and enables
you to interact with all of the folders and files in your project. Using the File
View, you can add, edit, copy, delete, or rename any file or folder that is displayed
in the project workspace. In the previous section, you learned how to copy an entire web site. Eventually
you will have to add files from an existing project to a new project that you are
working on. The File View makes this process easy by enabling you to copy these files
into the new Visual InterDev project. To add files to the root directory of the project,
select the root directory and click the right mouse button to display the shortcut
menu, as demonstrated in Figure 18.22. Adding a file to your project. Next, choose Add Files from the list of menu options. The Insert Files into Project
dialog window displays, enabling you to search for and select the file that you want
to add to the project, as illustrated in Figure 18.23. Once you select the file to add and click OK, it becomes a part of the project.
Any changes that you make to the file occur within the context of the project. The
changes don't affect the existing project, because you have made a copy of this file
and saved it in a different project. You also can import a folder's contents into
a project, which is helpful for copying multiple files into the project at the same
time. Choosing the new addition.
Another file- and folder-management function is adding a new folder to your project
to properly organize your files. For example, you may want to create folders to organize
items such as images, Java applets, sound files, and ASP files. You can right-click
the root directory in the project workspace and choose Add New Folder from the shortcut
menu. You will then be able to enter the name for your new folder. To rename a file or folder, select the item in the File View and right-click the
mouse to display the shortcut menu for the item. Choose Rename from the list of menu
items and enter the new name for the file or folder. To delete an item, right-click the mouse on the file or folder and choose Delete
from the list of menu items. A message will display, confirming that you want to
delete the file or folder. For folders that consist of multiple items, a confirmation
is displayed, enabling you to either delete all of the files at one time, or confirm
the deletion of each file contained in the folder. The right mouse button functionality and features included with Visual InterDev
tremendously simplify the process of managing and manipulating the files contained
in your project. This functionality is accomplished through the File View, which
borrows a page from the Windows Explorer and provides a highly intuitive approach
to working with your files.
The final lesson for the Chapter teaches you how to resolve broken relationships within
your diagram. Visual InterDev consists of an automatic tracking system that monitors
the links between the objects and files in your project. For example, when you rename
a file in your project, you receive a warning message similar to the one displayed
in Figure 18.24. Resolving a conflict: the proactive approach. This dialog window enables you to update the links in files that refer to this
object so that a conflict won't arise when you try to run your application. This
proactive approach to conflict resolution ensures a happy home for your project.
There will be occasions when conflicts do arise, however, as with the notice
in the Dos Perros application. The next section takes a closer look at the broken
link and searches for a resolution. You can use the tooltips help for an object that contains a broken link to identify
the conflict. For example, placing the mouse cursor over the CPYRIGHT.asp file displays
a tooltips message that is crying out for help, as shown in Figure 18.25. Identifying the problem. The file location information is displayed along with an error message for this
object, which describes the conflict in the link relationship. The notice
file is located at an Internet URL address, and the user isn't logged on to the Internet
to access this site. Based on this information, you can either copy the file to include
it in your intranet application, or you can enable the link to be resolved at runtime
when the user will be logged on to the Internet. This example demonstrates the process to follow on those rare occasions when you
have a conflict in your application. Because Visual InterDev takes a proactive approach
to managing these conflicts, you can feel confident that your objects will remain
in constant communication about their whereabouts, so that conflicts will be minimal.
ToChapter's lesson demonstrated how you can take control of your projects and manage
them effectively. Web-based application development can quickly get out of hand if
you don't have the proper tools and methods in place to manage your projects. You
have now discovered the tools that Visual InterDev includes to address the issue
of site management. You also have learned about some effective methods surrounding
the use of these tools. It is up to you to use them for efficient and effective management
of your web sites. The first part of toChapter's lesson demonstrated how to get a handle on your projects
by using the Link View. This powerful feature offers robust functionality for viewing
and interacting with your application objects. This part of the lesson took you on
a guided tour of the features of the Link View and showed you how to properly use
these features to your advantage. You learned how to view the links between your
objects and how to filter the information that appears in the diagram. The lesson next explained how to leverage your current development investments
for future applications. You learned how to copy your web sites and how to use this
feature within the context of a single development project and across multiple projects.
The Copy Web feature provides excellent support through the three key stages of your
project--development, testing, and production. The lesson then shifted gears and
outlined the inherent file management features of Visual InterDev. The final lesson explained how Visual InterDev proactively manages and resolves
conflicts within your application. You also learned how to use the Link View to debug
conflicts that arise between objects in your application.
ToChapter's workshop involves a research project. I want you to research web site
management and site visualization tools on the Internet. This field is expanding
at a rapid pace as the issues surrounding the proper management of a web site continue
to heighten in importance. You should make a list of these tools and search for their
purpose, features, strengths, and weaknesses. Then compare the purpose and qualities
of these tools with the site visualization and management tools contained in Visual
InterDev. In what ways are the other products weaker? In what ways are they stronger?
Document answers to these questions and others that you have regarding this topic
so that you can refer to them in the future.
|
||||||||||||||||||||||||||||||
|
|
Popular Tutorials
-
MS Access
1109
-
C++
1222
-
HTML
584
-
JavaScript
616
-
Vbscript
873
-
Oracle
473
-
VC++
875
-
SQL
2959
-
XML
514
-
Java
814
-
Perl
455
-
Linux
451
