Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P14 docx

That means instead of using a precompiled movie similar to what Flash offers, Silverlight applications are dynamic elements that are created on the spot by the server, browser, and the S

</object>end tag, as in Figure 21.7.

YouTube and Other External Flash Content

Until a few years ago, Flash content was primarily a design element, and youneeded to worry about how to include it in your pages only if you designed the sitewith Flash elements in mind But then out of nowhere a new video-sharing servicecalled YouTube appeared, and all of a sudden the ability to include Flash content inyour site became a must if you wanted to stay current

Today there are hundreds of different video-sharing sites, and almost all of themuse Flash as their player platform These sites build their client base (and revenue)

by getting people to embed the videos into their pages To make doing so as easy

as possible, they all provide the complete embed codes for you to copy and pasteinto your page Despite that, many novices still have trouble getting the players towork because they don’t understand the difference between Design view and Codeview

If you go to YouTube and find a video you like and want to place on your site, all youhave to do is copy the embed code (placed on the right side of the page) and paste

it into Code view at the location you want the video to appear You immediatelynotice that the code looks almost identical to the one Expression Web 3 insertsexcept that the actual link to the movie itself is different When the code is in yourpage, you can change the size and apply styles to it just as you did with the photogallery

Silverlight: An IntroductionSilverlight is the newcomer in the world of animation-based web elements It is based

on Microsoft’s new code language XAML and is intended to be not only an tive to Flash but also to introduce new types of functionality to the web and offlineapplications such as presentation software, desktop applications, and so on

▼

Placing Silverlight Applications in Your Page 373

Did you Know?

What sets Silverlight apart from Flash is that it is entirely code based, and the code is

open That means instead of using a precompiled movie similar to what Flash offers,

Silverlight applications are dynamic elements that are created on the spot by the

server, browser, and the Silverlight plug-in

Silverlight applications are built with NET-based code languages using a

combina-tion of Microsoft Visual Studio and a new program called Expression Blend 3, which

is included in the Microsoft Expression Studio One of the driving forces behind

Sil-verlight was to create a work environment where code-based developers and visual

designers could work together on the same project at the same time Because

Sil-verlight applications are 100% based, you now have that option For the

code-based developer, the entire application can be written in both Visual Basic and C#

code languages For the visual designer, the same application can be edited in

Expres-sion Blend without ever looking at the code In short, Silverlight could be the ultimate

amalgamation of two technical fields that, until now, have had a hard time finding a

common language

Placing Silverlight Applications in Your

Page

Although Silverlight is a relative newcomer, there is little doubt that it will become

important enough that you, as a designer, need to know about it or at least know

how to place its contents in your pages

Just like Flash, you need to install the free Silverlight plug-in to view Silverlight

content It is a simple one-time browser install, and you can find it at www

silverlight.net

Because this is an emerging technology, understanding the basics of how Silverlight

works gives you an advantage for when the technology and its applications become

more mainstream To get a glimpse of how powerful this new technology is and a

bet-ter understanding of how and why it works, you build a photo gallery application,

similar to the Flash gallery from earlier in this chapter and place it in your site

Try It Yourself

Create a Photo Gallery Using Slide.Show

As a part of the launch of Silverlight, Microsoft contacted a group of NET developers

and asked them to create custom applications that would be released on an open

license so that anyone could download and use them for their purposes One of these

pub-1 In Expression Web 3, create a new folder under the Gallery folder and call it

Silverlight.

You can use several different methods to add a Silverlight application to a webpage In this example you use two: first the object method and then the iFramemethod The differences and different usage situations become apparent as youprogress

For a Silverlight application to work, you previously added several different files

to the server But as the platform has evolved, it has become a lot easier to dle As a result, all you need to add to your site is a single code file and anobject tag, not unlike the one you just added for the Flash movie

han-2 Use the Import File option to import the files from the Silverlight folder into theSilverlight folder you just created There are only two: Vertigo.SlideShow.xapand Data.xml (see Figure 21.8)

3 In the Silverlight folder, create a new page based on myKippleMaster.dwt and

give it the name SlideShow.html Open the page in Split view.

Placing Silverlight Applications in Your Page 375

FIGURE 21.9

TheSilverlight.htmlpage as seen inCode view

4 Set the heading to Silverlight Gallery

5 Place the cursor in the content area and select Insert, Media, Silverlight from

the Main menu This opens a file browser Navigate to the gallery/Silverlight

folder and select the Vertigo.SlideShow.xap file; click OK to insert the Silverlight

application

As you can see from Figure 21.9, the inserted Silverlight gallery looks similar to

the Flash gallery when it was inserted—a gray box with some non-functional

content in it (refer to Figure 21.5) The <object> tag also looks similar

6 To get the Silverlight gallery to work, you still need to make a couple of changes

to the code First, for whatever reason, Expression Web 3 creates a relative link

that sets the address of the xap file as if the current page is in the root folder

and the xap file is in a different folder That is not the case here, and you need

to remove all the extraneous folder information from the code to get it to point

to the right file In Code view, change the source param value to look like this:

<param name=“source” value=“Vertigo.SlideShow.xap”/>

7 Finally you need to set some parameters for the Slide.Show application This is

one of the true powers of Silverlight applications: You can set custom

parame-ters for the application right in the embed code so that each instance of the

same application looks and works differently Under the other <param> tags

cre-ate a new <param tag with the name initParams and the value

8 Rename the page to SlideShow.aspx and preview the page in your browser.

You should see the Slide.Show application running with the images and mation from the Flash slideshow you created earlier, as shown Figure 21.10 If

infor-not, you might be missing the Silverlight plug-in, or you are not running thepage through Expression Development Server If you have problems, look at theQ&A for this hour to see whether you can find the answer there

Previewing Silverlight Applications in Your Browser

To make sure everything is working properly, you should preview the page in yourbrowser But if you do, all you see is the page with an empty white box in the con-tent section This is because Silverlight is a server-side script that to work properlymust be running on a web server In other words, technically, you need to uploadyour files to a web server and test them from there Fortunately, there is a way

▼

Placing Silverlight Applications in Your Page 377

around this problem: Because a big part of Expression Web 3 is the ability to

create advanced dynamic websites using Microsoft’s server-side script language

ASP.NET, the program comes equipped with a small application called Expression

Development Server This application creates a virtual server on your computer that

behaves like a web server and lets you run server-side scripts in pages even though

they are stored only on your computer You will be introduced to the Expression

Development Server in more detail in Hour 22, “Beyond the Basics, Part 1: PHP in

Expression Web 3.”

The problem here is that the Silverlight script runs only on a web server So, to

pre-view the application, you need to make Expression Web 3 think that the page you are

currently working with is actually an ASP.NET page That way it will be previewed using

Expression Development Server, and the Silverlight script will run properly Doing so

is surprisingly simple: Open the HTML file that contains the Silverlight application

you want to preview; select File, Save As on the menu bar, and change the file

exten-sion to aspx—the extenexten-sion for ASP.NET pages that can contain regular HTML code

Now when you open the page, it will be previewed in the browser through Expression

Development Server and the Silverlight application will run properly

Try It Yourself

Make the New Galleries Available

Now you have two galleries, naturally you want people to open and watch them To

do so you need to add links to them in the main menu of the site

1 Open the mykippleMaster.dwt file in Split view

2 Click on the menu and go to Code view

3 Change the button that now says Gallery to say Silverlight Change the href

attribute to point to the new SlideShow.aspx file you just created

4 Copy and paste the list item for the Silverlight button directly under the

Sil-verlight button Change the text to Flash and point the href attribute to the

flashGallery.html file in the Flash folder

5 Save the DWT file and click on Yes when you are asked to update all the

associ-ated pages

Now the visitor can choose to view either the Flash or the Silverlight gallery directly

from any of the pages

▲

The Flash image gallery is controlled by the images.xml file found in the Flash folder.

The syntax of that file is simple:

<album title=”Random Kipple”

description=”Some random photos of my kipple”

lgPath=”large/”

tnPath=”thumbs/”

tn=”thumbs/bagOpennies.jpg”>

<img src=”bagOpennies.jpg”

title=”Bag O’ Pennies”

caption=”A small hemp bag filled with pennies” />

</album>

Earlier you saved the SlideShow.aspx and SilverlightGallery.aspx pages asASP.NET files to preview them through Expression Development Server Now thatyou have finished the pages, you should change their extensions back to HTML

This is because ASP.NET files run only on Microsoft servers, whereas HTML filesrun on all servers, and the files do not actually contain any ASP.NET content Afterit’s on a server, the Silverlight application works regardless of what the file exten-sion is

To add another image, all you need to do is add another <img> tag with the src,title, and caption attributes defined To add another album, just create a new

<album>tag and insert the new information To add more images, simply place thelarge version in the large folder and the thumbnail in the thumbs folder

One caveat: The images.xml file and image folders need to stay in the same folder asthe Flash movie Otherwise the movie will not work

The Silverlight image gallery is controlled by the Data.xml file found in the verlight folder The syntax is similar to that of the Flash gallery:

title=”Bag O’ Pennies”

description=”A small hemp bag filled with pennies”

image=” /Flash/large/bagOpennies.jpg”

thumbnail=” /Flash/thumbs/bagOpennies.jpg” />

</album>

Likewise, to add another image, just add another <slide> tag with the title,

description, image, and thumbnail attributes defined To add another album, just

create a new <album> tag and insert the new information In this example, the URL

that points to the images starts with / to make the browser go down one folder and

then into the correct folders

In addition to changing the images in the Silverlight gallery, you can change many

of the look and behavior attributes To get further information, check out the many

demos in the application folder you downloaded

Summary

Both Flash and Silverlight are technologies that can add an unparalleled level of

visual impact and interactivity to web pages These applications are created using

dedicated programs (Adobe Flash for Flash files; Microsoft Visual Studio and

Microsoft Expression Blend for Silverlight) and inserted into your pages as finished

elements

Because the files are external content, Expression Web 3 is mainly used to position

and style the boxes they are inserted into: Flash movies are inserted into the page

using either the <object> or the <embed> tag In most cases you want to use both,

with the <object> tag surrounding the <embed> tag, even though the <embed> tag

has been deprecated This is because many older browsers do not fully comprehend

or support the <object> tag yet

Flash movies are placed in boxes on the page, and you can apply standard CSS

styling to their <object> tags to set the placement, borders, backgrounds, and

what-ever else you feel like If you ignore the Flash content, an inserted Flash movie acts

just like any other replaced item (such as an image) In other words, you have full

control of where the movie appears In this hour, you learned how to embed a Flash

movie into your page and use CSS to change its position and styling

Silverlight is a new technology that has been on the market for only a couple of

years It offers a great alternative to Flash and has many features you can’t get with

Flash Most important, Silverlight is entirely script based, so both developers and

designers can work on the application at the same time without having to compile

and decompile them repeatedly

In this hour you used the Microsoft CodePlex project Slide.Show, created by Vertigo,

to get a feel for how Silverlight applications work By adding a couple of files andmaking some alterations to the default Silverlight embedding code and the objecttag, you placed a slideshow application much like the one in the Flash exampledirectly into your page

Silverlight is a server-side script, so it will not run properly on your computer unlessyou use a virtual server In this hour, you learned how to trick Expression Web 3 intopreviewing the pages with Silverlight content through Expression DevelopmentServer by changing the file extensions of the pages to aspx

Q&A

Q When I preview the FlashGallery.html page in Internet Explorer, I get a ing that the program has restricted the website from running ActiveX con- trols that could access my computer What do I do?

warn-A Embedded content such as a Flash movie uses ActiveX controls to play Forsome reason, when you view a local web page, Internet Explorer blocks thistype of content, and you actively have to tell the browser to accept it by click-ing on the warning bar at the top of the page and selecting Allow Blocked Con-tent This happens only for local files; after the page with the Flash movie is on

a web server, you no longer receive this warning

Q I tried previewing the SlideShow.html file in my browser, but all I got was a blank page.

A Silverlight is a server-side script, meaning that the server actually performsoperations with the script when it is displayed When you preview HTML pages

in your browser through Expression Web 3, no server is used To preview verlight content, you need to run the page through the virtual server calledExpression Development Server that is built in to Expression Web 3 To do so,rename your file by changing the extension to aspx This tricks ExpressionWeb 3 into thinking the file is a dynamic web page that requires server-sidescripts to work and Expression Development Server kicks in

Sil-Q The Flash image gallery/Silverlight image gallery shows up, but there are no images!

A Both the Flash and the Silverlight image galleries source their content fromoutside the application itself They get their data from the images.xml andData.xml files, respectively, and the images are stored in the Flash folder underthe large and thumbs folders For the galleries to work properly, it is imperative

that the folder structure described in the hour be retained The Gallery folder

should contain two folders: Flash and Silverlight All the Flash files should be

in the Flash folder, and all the Silverlight files should be in the Silverlight

folder If your folder structure is correct and you are still not seeing anything,

go to the finalized version found in the lesson files and replace your files with

the ones provided

Workshop

The Workshop has quiz questions and exercises to help you put to use what you have

just learned If you get stuck, the answers to the quiz questions are in the next

sec-tion But try to answer the questions first Otherwise you’ll be cheating yourself

Quiz

1 What are the two methods of embedding Flash movies in a HTML page, and

which one is the correct one?

2 Which is better? Flash or Silverlight?

Answers

1 The two methods are using the <object> tag and using the <embed> tag

Although technically the <object> tag is the correct standards-based method,

it is advisable to also place an <embed> tag within the <object> tag to account

for the lack of support for the latter in older browsers such as Internet Explorer

6 Always remember to nest the <embed> tag inside the <object> tag, or you

will get two instances of the Flash movie in browsers that support both

2 If you ask Adobe, the answer is Flash If you ask Microsoft, the answer is

Sil-verlight In reality, they are completely different applications that both have

advantages and disadvantages Flash is well established and has a high

pene-tration rate (meaning most computers can play Flash movies) Silverlight is

rela-tively new on the market but offers a whole new range of functionalities All

things being equal, the real question you should ask yourself is what

program-ming language you are most comfortable with If you already know ActionScript

and have worked with Flash in the past, you can always “be safe” and stick with

that platform If you come from or work with a development team that uses

.NET architecture, you already have an advantage when starting to work with

Silverlight So to answer the question: There is no “better,” just different

Exercise

Use CSS positioning to change the location of the embedded Flash and Silverlightapplications Give them a white background and a thin gray border by setting thepaddingand border attributes

Embed a YouTube video into one of your pages, and use the <object> and <embed>

tags to resize the video so that it fits half the page Use CSS to restyle the video andchange its positioning so that the text flows around the video

Open the images.xml and Data.xml files in Expression Web 3 and change the order

of the images Use copy and paste to create new albums for both galleries and testthem to see how the applications react to the new content

What You’ll Learn in This Hour:

How to install PHP on your computer

How to configure and use the Expression Development Server to test

PHP scripts locally on your computer

How to create a PHP-based email form

How to use PHP to test whether form fields are filled out and that the

email was successfully sent

Introduction

If you have surfed the World Wide Web for any length of time, you probably noticed

that not all web pages have the html suffix When you visit more advanced sites,

you often see that the filenames in the address bar end with asp, php, or any

num-ber of other suffixes All these file types hint at the server-side technology that

gener-ates the pages

Although Hypertext Markup Language (HTML) is a great code language with a wide

variety of applications, it is capable of making only static pages A static page is one

in which the designer or developer inserts all the content, and it remains the same

until someone manually edits the file In contrast, most large websites including

news sources, blogs, social networks, and so on consist of dynamic pages A dynamic

page is one in which the page contains only the framework, and content is gathered

from other sources such as databases, other sites, or visitor input The one thing all

these dynamic pages have in common is that they all use some form of server-side

scripting language to generate their content

As you learned in Hour 20, “Getting Interactive with Forms,” the type of server ing your site determines what kind of server-side scripts you can use In Hour 20, youbuilt an email form that utilized FrontPage Server Extensions for its functionality.

host-This form required Windows Server architecture to work In this hour, you learn how

to use the new PHP features built in to Expression Web 3 to create a PHP version ofthe same form that can be used in sites hosted on a Linux server

PHP: An IntroductionPHP is a code language used to create dynamic web pages; that is, pages whose con-tent is generated by the web server rather than stored in the pages Advanced PHPpages are little more than frameworks with a bunch of design elements and boxespopulated with content as the visitor clicks different buttons You could say it is anadvanced version of the Dynamic Web Template in which the template is the pageitself and the content comes from a database or other external sources

PHP can also perform other tasks such as processing form results, submitting content

to databases, and editing files To get an idea of just how powerful PHP is, considerthat the vast majority of the millions upon millions of blogs floating around theInternet these days run off PHP Because of this, many new PHP applications cus-tomized for blogging are developed every day

The power of PHP lies in its capability to work alongside standard HTML code Thatmeans you can choose whether you want to place your PHP scripts in a separate file

or place them within your HTML pages inside the HTML code In practical terms, thismeans you can create an HTML page with dummy content and, when you finishwith layout, you can replace the placeholder content with a PHP script that grabs thereal content from an external file, database, other website, Really Simple Syndication(RSS) feed, or a form To make the file with the PHP script work, it needs the exten-sion php rather than html, but even with this extension, all the HTML code rendersnormally In fact, if your site is hosted on a server with PHP installed, you can save

Installing PHP on Your Computer to Test PHP Scripts 385

all your HTML files as php files without any difference in how the pages display in a

browser

What Does PHP Stand for Anyway?

If you look up the definition of PHP, you get the following explanation: “PHP” is a

recursive acronym for “PHP: Hypertext Processor.” But that doesn’t explain anything

because the long version of the acronym contains the acronym itself! This

phenom-enon is referred to as a recursive acronym and is fairly common in the geeky world

of programming More than anything, the use of recursive acronyms in

program-ming is a tongue-in-cheek way to deal with the fact that for the most part these

acronyms don’t mean anything In PHP’s case, however, the acronym originally had

a meaning: PHP used to stand for Personal Home Page tools (without the t), but as

the language morphed into a more advanced scripting language, this description

became obsolete and the new recursive acronym was adopted in its place

Other examples of ridiculous recursive acronyms are LAME, which stands for

“LAME Ain’t an MP3 Encoder (LAME is, in fact, an MP3 encoder) and Wine, which

stands for “Wine is Not an Emulator.” (Likewise Wine is an emulator that allows

Windows software to run in Linux environments.) For more examples from the

geeky world of recursive acronyms, take a look at the list found at http://en

wikipedia.org/wiki/Recursive_acronym

Installing PHP on Your Computer to Test

PHP Scripts

Because PHP is a server-side script, pages with PHP, code will not work properly if you

test it in your browser as you have with HTML pages This is because unlike HTML,

which renders in the browser, PHP renders in the server, and it sends the resulting

information to the browser for display One way to work around this problem is to

upload your PHP files for testing on a web server that has PHP installed and test

them live, but that is a cumbersome and ineffective method requiring time, a live

Internet connection, and available server space Another way to approach the issue

is to run a web server with PHP installed on your local network This solution is

com-mon in larger companies but is not feasible (or economical) for smaller companies

and those just starting out with web design

The ideal solution would be if you could test your PHP scripts locally on your

com-puter in the same way that you test your HTML pages To answer this call, the

Expression Development Server you were introduced to in Hour 20 can be set up to

include PHP as a testing environment

1 In your web browser, go to http://windows.php.net/download/, as shown inFigure 22.1, to find the latest release of PHP (p.t is the latest stable PHP release

is version 5.3.0)

2 Download the installer and save it on your computer

3 Run the installer and install the application to the suggested location (in mycase C:\Program Files\PHP)

4 In the Web Server Setup dialog (see Figure 22.2) you do not need to set up aweb server (that’s what the Expression Development Server is for), so select Donot setup a web server unless you plan to use the web server for something else

5 Open Expression Web 3 and select Tools, Application Options on the menu bar

to open the Application Options dialog (see Figure 22.3)

6 In the PHP section at the bottom of the Application Options dialog, use theBrowse button to navigate to the location in which you installed PHP