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

ptg 372 HOUR 21: Working with Flash and Silverlight FIGURE 21.7 The <embed> tag should always be placed inside the <object> tag to avoid having two consecutive Flash movies appear in browsers that support both tags. To prevent the browser from displaying two copies of the same Flash movie, always place the <embed> tag at the end of the <object> tag on the line above the </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 you needed to worry about how to include it in your pages only if you designed the site with Flash elements in mind. But then out of nowhere a new video-sharing service called YouTube appeared, and all of a sudden the ability to include Flash content in your site became a must if you wanted to stay current. Today there are hundreds of different video-sharing sites, and almost all of them use 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 paste into your page. Despite that, many novices still have trouble getting the players to work because they don’t understand the difference between Design view and Code view. If you go to YouTube and find a video you like and want to place on your site, all you have 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 immediately notice that the code looks almost identical to the one Expression Web 3 inserts except that the actual link to the movie itself is different. When the code is in your page, you can change the size and apply styles to it just as you did with the photo gallery. Silverlight: An Introduction Silverlight 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 alterna- tive to Flash but also to introduce new types of functionality to the web and offline applications such as presentation software, desktop applications, and so on. From the Library of Lee Bogdanoff ptg ▼ 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% code-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 From the Library of Lee Bogdanoff ptg 374 HOUR 21: Working with Flash and Silverlight FIGURE 21.8 The two files, Vertigo. SlideShow.xap and Data.xml, must be under the Silverlight folder for the application to work. projects, called Slide.Show, was developed by Vertigo (www.vertigo.com) and is pub- lished on the Microsoft CodePlex website for public download. This application is a perfect example both of how Silverlight works and how you can use two entirely dif- ferent methods to place Silverlight content on your page. As a bonus it is an excellent and highly customizable application that lets you build a great-looking photo gallery with little work. You can get the entire source code along with templates, demos, and customization information by visiting http://www.codeplex.com/SlideShow. To make things easier for you, I compiled the core files in the lesson files for this chapter, but if you want you can start from scratch by getting the entire application from the Code- Plex site. 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 web page. In this example you use two: first the object method and then the iFrame method. The differences and different usage situations become apparent as you progress. 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 han- dle. As a result, all you need to add to your site is a single code file and an object tag, not unlike the one you just added for the Flash movie. 2. Use the Import File option to import the files from the Silverlight folder into the Silverlight folder you just created. There are only two: Vertigo.SlideShow.xap and 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. From the Library of Lee Bogdanoff ptg Placing Silverlight Applications in Your Page 375 FIGURE 21.9 The Silverlight.html page as seen in Code 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 From the Library of Lee Bogdanoff ptg 376 HOUR 21: Working with Flash and Silverlight ▲ FIGURE 21.10 After you apply some small changes to the code, the Slide.Show Sil- verlight applica- tion runs properly in your browser. ConfigurationProvider=LightTheme,DataProvider=XmlDataProvider;Path =Data.xml . It should look like this: <param name=”initParams” value=” ConfigurationProvider=LightTheme,DataProvider=XmlDataProvider;Path =Data.xml”/>. This parameter sets the theme (look) of this instance of the Slide.Show application to LightTheme and tells the browser that the data file pointing to the content of the gallery is called Data.xml. Save the page. 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 infor- mation from the Flash slideshow you created earlier, as shown Figure 21.10. If not, you might be missing the Silverlight plug-in, or you are not running the page through Expression Development Server. If you have problems, look at the Q&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 your browser. 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 properly must be running on a web server. In other words, technically, you need to upload your files to a web server and test them from there. Fortunately, there is a way From the Library of Lee Bogdanoff ptg ▼ 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 extension 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. ▲ From the Library of Lee Bogdanoff ptg 378 HOUR 21: Working with Flash and Silverlight Watch Out! Bonus: Making the Galleries Your Own You can customize both the Flash gallery and the Silverlight gallery introduced in this hour with your own images and descriptions. As you previously learned, all the images are placed under the Flash folder, thumbnails in the thumbs folder, and the full images in the large folder. Both galleries use XML files to define the image loca- tions, titles, and descriptions. You can change these using Expression Web 3 and make the galleries feature your own images. 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 as ASP.NET files to preview them through Expression Development Server. Now that you 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 files run on all servers, and the files do not actually contain any ASP.NET content. After it’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 the large 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 as the Flash movie. Otherwise the movie will not work. The Silverlight image gallery is controlled by the Data.xml file found in the Sil- verlight folder. The syntax is similar to that of the Flash gallery: <album title=”Random Kipple” description=”Some random photos of my kipple” image=” /Flash/thumbs/bagOpennies.jpg”> <slide From the Library of Lee Bogdanoff ptg Summary 379 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. From the Library of Lee Bogdanoff ptg 380 HOUR 21: Working with Flash and Silverlight 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 and making some alterations to the default Silverlight embedding code and the object tag, you placed a slideshow application much like the one in the Flash example directly into your page. Silverlight is a server-side script, so it will not run properly on your computer unless you use a virtual server. In this hour, you learned how to trick Expression Web 3 into previewing the pages with Silverlight content through Expression Development Server 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 warn- ing that the program has restricted the website from running ActiveX con- trols that could access my computer. What do I do? A. Embedded content such as a Flash movie uses ActiveX controls to play. For some reason, when you view a local web page, Internet Explorer blocks this type 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 performs operations 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 Sil- verlight content, you need to run the page through the virtual server called Expression Development Server that is built in to Expression Web 3. To do so, rename your file by changing the extension to .aspx. This tricks Expression Web 3 into thinking the file is a dynamic web page that requires server-side scripts to work and Expression Development Server kicks in. 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 from outside the application itself. They get their data from the images.xml and Data.xml files, respectively, and the images are stored in the Flash folder under the large and thumbs folders. For the galleries to work properly, it is imperative From the Library of Lee Bogdanoff ptg Workshop 381 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. From the Library of Lee Bogdanoff [...]... By using the PHP tools in Expression Web 3, including the full IntelliSense support, you are well equipped to dive into the world of server-side scripting If you want further information about PHP, including tutorials, visit the official PHP website at www.php.net or the W3C schools at http://www w3schools.com/PHP/ Q&A Q When I tested my PHP page in the browser after installing PHP the address , in the... From the Library of Lee Bogdanoff 39 0 HOUR 22: Beyond the Basics, Part 1: PHP in Expression Web 3 1 Place the cursor before the echo command in Code view and press Enter to create a new line Insert the following line of code: $heading = ‘Contact Us’; The first part of the code ($heading) is the name of the variable The content of the variable is contained within single quotation marks, and the semicolon... command (in green) in Code view, type “Contact Me” with the quotation marks included (see Figure 22.5) Save the page and press F12 to test it in your browser through the Expression Development Server If this is the first time you are using PHP under Expression Web 3, you From the Library of Lee Bogdanoff Using PHP and HTML to Create a Contact Page 38 9 FIGURE 22.4 Expression Web 3 has a set of built -in PHP... command is echo To insert a heading using PHP, you need to insert the echo command 2 In Code view, erase the (heading) text and place the cursor in the heading editable region 3 Select Insert, PHP submenu on the menu bar and choose Echo (see Figure 22.4) This inserts the PHP delimiters and the echo command The echo command displays any text inserted inside quotation marks as regular HTML text in a browser:... of Windows Server 2008, full PHP support is now available on Microsoft servers, giving you the choice to use ASP.NET or PHP Parallel to this, Expression Web 3 was equipped with PHP support giving designers and developers the ability to build sites and applications without looking elsewhere for their PHP scripting As you learned in Hour 20, “Getting Interactive with Forms,” the type of server hosting... , in which the PHP code goes in the space between Expression Web 3 not only has full IntelliSense support for PHP but also has a series of common PHP scripts built in to the Insert menu for easy access and use Many of these code segments come equipped with the beginning and end delimiters The most basic command of any code language is the one that prints a line of text on the screen In PHP,... 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 test them to see how the applications react to the new content From the Library of Lee Bogdanoff Introduction 38 3 HOUR 22 Beyond the Basics, Part 1: PHP in Expression Web 3 What You’ll Learn in This... explain anything because the long version of the acronym contains the acronym itself! This phenomenon 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 programming 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... server, or on a live web server on the World Wide Web Creating an Email Form Using PHP In Hour 20, you created an email form using the built -in functionalities of Expression Web 3 This email form generated an email sent to a specified address by way of the FrontPage Server extensions on the web server But not all web servers have FrontPage Server extensions installed, and on those servers the email form... in Code view Find the Name value and change it to fullName 5 Use the Tag Properties panel to set the tab index to 1 and the size to 30 (see Figure 22.7) FIGURE 22.7 You can use the Tag Properties panel to define all available variables for any form control From the Library of Lee Bogdanoff 39 2 HOUR 22: Beyond the Basics, Part 1: PHP in Expression Web 3 6 Insert a new Input (Text) control in the next . Server that is built in to Expression Web 3. To do so, rename your file by changing the extension to .aspx. This tricks Expression Web 3 into thinking the file is a dynamic web page that requires. 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. Bogdanoff ptg Introduction 38 3 HOUR 22 Beyond the Basics, Part 1: PHP in Expression Web 3 What You’ll Learn in This Hour: . How to install PHP on your computer . How to configure and use the Expression