Web Premium Feature Tour Overview

[PLACE HOLDER] Hi, I'm Greg Rewis, principal evangelist at Adobe. I'd like to talk to you about Creative Suite Web Premium 5.5. Now, unless you've been living under a rock, you know that a lot of things have changed on the Web and a lot of things have changed in our flagship product, Dreamweaver CS5.5. I'd like to talk to you about a few of those things. How many of you have heard of HTML5 or CSS3? I'm sure every single one of us. And in fact, I'm sure our clients are all banging down the doors asking for an HTML5 website. And Dreamweaver can help us out. Let's take a look at our new document dialog where we can see that we have a list of starter layouts that we introduced back in Creative Suite 5. And shortly after the release of Dreamweaver CS5, we introduced the HTML5 update for Dreamweaver, and this added these two new HTML5 based layouts. I want to just point something out. Again, I'm sure that a lot of you are being asked to create HTML5 documents. Let me let you in on a little secret. You can choose any one of the starter layouts that we have in Dreamweaver CS5 and still make it an HTML5 document by simply choosing the HTML5 doctype. But if we are wanting to go all out and use those new elements from HTML5, we'll begin by selecting one of these two starter layouts, either the two-column or the three-column layout. I guess first we need to decide what it is that we're going to be building. So let's take a real quick look at the comp that was delivered by our designer. As we can see, this is a pretty complicated comp if you think about it. At first glance, it's just a three-column layout. But if we look closely, there's a lot of things that we're going to have to tackle-- things like transparency, rounded corners, native video, things that aren't quite sitting straight, like the little wine-tasting badge in the upper right-hand corner. These are all things that we're going to solve through HTML5 and CSS3. So let's head back over into Dreamweaver, knowing that it's probably going to be the three-column layout that we're going to use. So I'll simply begin by clicking on that HTML5 three-column layout, again remembering to choose my doctype set to HTML5 and specify where I want to put my CSS. For me, I'm just going to start with it in the head of my document so that we can take a look at it together more easily. And then at the end, I would go ahead and move that into an external style sheet to use among all the other pages that I'm building in the site. Creating this particular page, you can see that we have some starter instructions to let us know sort of how these pages are put together. We can see that we've even provided some basic links--a navigation area over here. But if we take a look behind the scenes in the source code of this document, you're going to see that this source code is now actually using these new HTML5 elements. And again, this is because at the very top of the document, we've specified that this is an HTML5 doctype. Yes, this is the HTML5 doctype. Short, concise, and to the point. It's simply HTML. Now, going back down to those new elements, I want to just toss out a little bit of information for those new elements. As you can see, I've got all my CSS there. It's nicely commented so that we know what's going on. And when I get back down to these elements, just a little word of information as I point out that we have a nav element here. Obviously very obvious what a nav should do. We have a header element here. Obvious as to what it should do? Perhaps. But with HTML5, it's all about the semantics of the elements themselves. So while we do have a header in our document and would typically think that a header goes at the top of the document, we can use the header element basically anywhere in the page. We actually have a footer element as well all the way down here at the bottom, and that footer element could go in a different place. It doesn't have to be at the bottom of the document itself. It might be at the bottom of an article because, yes, an article might have footer content. Or it might also have a header content. So just remember you can mix and match these to really semantically mark up what the elements mean in the context of the page. Now, for us, we're probably going to want to do a little bit of moving things around, so I'm going to take my nav, and I'm just going to move that on up into my header element. And then I've got a sidebar with some asides inside of it. And an aside you can sort of think of as an element that belongs to the document but could potentially be removed from the document without harming the meaning of the overall document. And this aside, maybe we actually want to move it outside of the sidebar itself. Again, we can change the order to match what it is that we're looking to design. Once we've got everything arranged the way that we want, it's a real big question. What browsers are going to actually support these HTML5 elements? The good news is, how about all of them? Well, that's a little white lie. All the new modern browsers support HTML5, so we're talking things like Firefox, and we're talking things like Safari and Chrome. They're already embracing HTML5. Opera is also embracing HTML5. But what about Internet Explorer? Well, there's some good news. Internet Explorer 9 supports HTML5 and does it really well, in fact. I'm sure you're thinking, "What about all those other older Internet Explorer browsers?" We've got you covered there as well, you see, because in this document right up here at the end of our head section, we actually have a little comment in there. This is an Internet Explorer conditional comment-- in other words, read only by Internet Explorer-- and it simply says "If less than Internet Explorer 9," so that means, of course, 8, 7, and 6-- they're going to read this and do the instructions right here in this line. This is simply a script tag linking off to a piece of JavaScript that was written by Remy Sharp to help enable Internet Explorer 6, 7, and 8 to understand these HTML5 elements. So that means that the way this page looks in Dreamweaver's Design View when we turn on Live View is actually rendering the WebKit, the Web standard's version of the page. It's also going to look exactly like this over in Internet Explorer 9, and, through that little JavaScript, 8, 7, and 6 as well. So that means we can begin building with HTML5 elements today, and Dreamweaver has full support for not only rendering these elements in Live View but for code hinting them in the code itself. And I'll show you that in a future demonstration. CSS3 is of course just as important for the Web as HTML5 because CSS is the presentation layer of all that beautiful Web content that we see out there. And again, I'm sure your customers are asking you to support CSS3 or add CSS3 support to their sites. And of course our designer was absolutely ready to do this with the comp that he delivered to us. Let's take another look at that comp where we can see that we have, wow, transparencies, rounded corners, things sitting askew, again all sorts of things that we're going to have to tackle using CSS3. Thankfully, Dreamweaver CS5.5 actually supports CSS3 not only in Code View but also visually as well. Let's return back over to Dreamweaver, and you can see that I have a little bit of the design already going. So it's looking okay but not completely the way that our designer envisioned it. Of course this is, first of all, because I'm currently just looking at the page in Design View. You might remember that we added Live View back in a previous version of Dreamweaver, which enabled us to see the page exactly the way it appears in standards-based browsers such as Chrome or Safari because we built the WebKit browser engine into Dreamweaver. So let's go ahead and turn that on first and see that, well, okay, it looks a little bit better than it did before but still does not match the design that our designer had in mind. A few things I have already added. You might notice up here along the top of the page I have a colored bar that is semi-transparent. Our designer called out that very same transparency for the three columns of content that we have here on the page. So the first thing we need to do is to create a rule or a selector to identify these individual columns and then apply that color transparency. As I begin to click through the individual columns themselves, keep an eye over here on my CSS panel. I'll make this area here where the rules appear a little bit easier to see. And as I am moving between these, you'll notice that I have a rule called Equal Height or eqHeight that has been applied to each one of these. That's a perfect selector for that transparency since it is already applied to all three elements. Let's go ahead and add our background color. Actually, our background color has already been added. You can see here's our background color declaration, and it is currently white or FFF. I'm sure you all remember that is actually white in the hexadecimal color value scale that we've been using on the Web since, well, the Web basically began. Again, we don't want to use that anymore; we want to switch to something different. We want to allow for transparency, and that's all part of a new color spectrum-- not really new but new to us in CSS--called RGB. RGB is red, green, blue. I'm sure you're probably already familiar with that. But we've not had support for that in previous versions of Dreamweaver. But in Dreamweaver CS5.5 we do. And we find that by simply selecting our color value. I'm going to use my color pop-up here, and then I'm going to go over to my little submenu where I can now specify the color format, either in that three-digit hexadecimal value or six-digit hexadecimal value that we've been using all along or, as I said, using these exciting new color spaces of RGB or HSL or RGBa and HSLa. Pop quiz: What does the A mean? I'm sure you're guessing alpha--and you'd be right. So as we choose the RGBa value, you'll notice that as I move around my color wheel, you're seeing that that value is actually being reflected right up here along the top. Our white has been translated from that #FFF into an RGBa value of 255, 255, 255 and 1. I need to actually select it so that it actually is applied. We'll do that once again. Here we go. Select it--there we go--so that we have that white as that 255, 255, 255 and 1 value. Now, where's the alpha? That last value, that number 1. Being 1 means that this is completely opaque, so we're going to need to change this value. We can add any value between 1 and 0, so I'm going to go and just say, "All right. Let's give it a little bit of transparency. Let's say 0.8." When I choose 0.8 and hit my Return key, you'll notice that immediately over here in the Live View, Dreamweaver has updated to show us that slight transparency peeking through the white. We didn't even have to reload the page because as we work within our CSS Rules panel in Dreamweaver CS5.5, Dreamweaver's Live View is updating to reflect those changes dynamically. That means that we also could do something like maybe the rounded corners that our designer had called out for those same three columns. To do that, we're going to need to add a new property. That property you probably are familiar with if you've ever worked in Fireworks or Illustrator or any graphics program that allows you to create rectangles with rounded corners. That property is called border-radius. We're going to go to our Add Property link here, and I'm going to open up my long list of CSS properties. There's a whole long list of these now because CSS3 adds even more to the party. What we're looking for is that border-radius and, sure enough, all of our CSS3 properties are displayed here within my list. I'm going to choose that new border-radius. And then you'll notice a new little icon in the CSS panel indicating that I can assign the corner radius to the value of this particular rule by simply clicking upon it and popping up our new dialogue here to say, "How much would you like?" "I don't know. Let's go with 10 pixels." And let's go on all four corners. Notice I've not even released the dialog, and yet over in the Dreamweaver's Live View we've actually seen that value change and update. Let's go for 20. Oh, much nicer. I sort of like that. Twenty pixels of rounding on all the corners. Again, if I uncheck the Same For All, then I can apply that value to individual corners as well. Of course that gets all of the modern browsers. What do I mean by that? All of the most current browsers. So Chrome and Safari, the most current browsers out there using that WebKit engine, understand border-radius. Older versions of Chrome and Safari do sort of, kind of. And what about Firefox or Opera or any of those other browsers out there? In order to support them, we actually have to use something called a vendor-specific prefix. I'm going to show this to you. Since I haven't shown you code, I'm actually going to go to code and do it there just to show you that not only do we have this support in our CSS panel, but we also can hand type if we would like to do so, if we find that faster. I'm just going to go ahead and hit my Return key to give me all of the CSS values here. That vendor-specific prefix actually is not going to be here in my list because it begins with a dash. Watch what happens when I type the dash. Dreamweaver suddenly changes that list and says, "These are the prefixes "that belong to those individual vendors or those individual browsers." We see four of them. The first one, moz, that's Moz or Mozilla. That's actually for all of the Firefox-based browsers. We have ms. That of course is Microsoft. And this is the vendor prefix that they are beginning to use in Internet Explorer 9. We have o for Opera and w for WebKit. The WebKit browser is the one that we were already using. Let's start with that one. I'm going to go ahead and just hit my Return key, and you'll notice my list once again appears. However, this list is actually much shorter than that list that we saw earlier on because these are just the properties that are supported through that WebKit vendor-specific prefix. So I want to go ahead and get down to border-radius, so obviously I'll begin by typing B and O and R. And as I type, you can see that Dreamweaver is narrowing down my selection until I get down to the one that I'm interested in. I'll just go ahead now and select border-radius, and we'll assign it that same 20 pixels. And again, let's try that with moz. M-O-Z. And again, we have another list--a list that is different from the WebKit list because these are the things that are supported by Mozilla or the Firefox browsers themselves. So let's go ahead and just choose that since it's right there, border-radius. And there we have it. Now, if we were to do it once again and type O, you'll see a much shorter list because at this time, Opera had not supported those border-radius properties here with a prefix. That means that the vendors, the browser makers themselves, are gradually implementing support for these new CSS3 technologies. And Dreamweaver is smart enough to realize which ones are needed in order to display for those older browsers. There's one last little thing that I want to point out to you so you don't make a mistake along the way. Always remember, never forget, the real property-- border-radius in this particular case-- should always be the last one in the cascade. Remember CSS is all about cascading or the logical order in which things flow. So we always want to put our vendor-specific attributes such as WebKit border-radius, moz border-radius, before the actual one that does not contain a vendor-specific prefix. Why? Because in the future, browsers are not going to need these vendor-specific prefixes, and we want to make sure that the last thing we leave them with is always the right thing, the standards-compliant thing. So with that, you've already seen how Dreamweaver can support some really cool CSS3 properties: transparency and rounded corners. But we've got one more little surprise for you. If we go back over to our layout here--let's just sort of scroll over to the right-hand side and up just a little bit--I've got sort of a round badge here for a wine tasting. Of course what I'd really like and what the designer had called out in our comp was for that thing to actually be sitting sort of rotated on our page. Think about this: Try to do this in HTML without CSS3. How would you do it? First you'd have to probably go make an image in Illustrator or Fireworks or Photoshop. It looks like there's a gradient there, so you'd have to do a gradient as well on that image. You have to export it, bring it in, and--ooh, wait, how are you going to do that text? How are you going to rotate that? I guess you're going to have to put that into the image itself, which of course means that it's no longer searchable, it can't be found by search engines, etc, etc. Wow! A lot of problems there. So that's why CSS3 is so amazing. Let me go ahead and click upon this badge here and show you that this is actually using a class called Reminder. I'm going to go just expand my CSS list here so that you can see my properties here are very, very interesting. We have things like--ooh--border-radius. Hey, wow! Border-radius. Huh. We've already learned that. In fact, what you're looking at, this rounded object, is not an image at all. It's a box that has a border-radius set evenly across all four corners to actually make it become a circle. And the gradient, that's not an image either. In fact, let me just go straight to code so we can view this a little bit nicer. You can see that actually we have a WebKit gradient right here in the background. We also have a Mozilla gradient in the background. So both Firefox and Chrome and Safari are actually seeing the gradient as part of CSS3. You'll also notice for those older browsers that don't support those newfangled gradients, we've actually got an image back up here that they're going to see. So it doesn't matter across the board what we're looking at, all of the browsers are going to see the same thing. We were talking, though, about rotating or changing-- transforming is the word I'm going to use--that object. So the last thing that I'm going to do is go down here in the CSS for this object and tell it to turn using CSS. Again, the way we do that is by using some CSS3. So I'm just going to go ahead and bring my list back up. You'll notice that I actually used a keyboard shortcut I'll fill you in on. If you type your Control and tap your space bar at any time, you're going to get the CSS3 list of properties. In fact, any code hinting that is available in Dreamweaver's Code View is available through that Control, space bar. And now what I need to do is actually something called a transform. So as I begin to type, I'm going to get down to Transform, and there are a lot of transformations, really, really exciting things that we can do-- things that we're familiar with from our graphics applications but we can do it all in pure CSS. The one that I'm going to do is obviously rotate. So I'm going to say, "Let's go ahead and rotate this." Let's say we'll rotate it 25 degrees. Oops! Not 235 degrees but, rather, 25 degrees. There we go. And again, I'll ask Dreamweaver to update. Because I'm working over here in the Code View, I'm going to need to hit my Refresh or use my keyboard shortcut. And as we look at our page, we'll notice, oh, nothing happened. Why? Because this is one of those properties that is specified in CSS but that browsers have not yet begun to implement on its own. So if you were paying attention from earlier, what do we need? A vendor-specific prefix. I'll type my WebKit, we'll go ask for that transform, we'll do that very same rotate, and we'll say, "Let's do it 25 degrees." And now we'll ask for Dreamweaver to update our view. And as we scroll over there, there we have our badge rotated magically. We didn't have to go to a graphics application. It's all being done with pure CSS. Of course for production, I would go ahead and add my Mozilla support as well. If you've been following along in any previous episodes, you've seen that we've got a nice design going here using HTML5 and CSS3. And that always brings up the question, "What's this really going to look like "in all the browsers out there in the wild?" Using Dreamweaver, in my Live View I've actually seen exactly how the page is going to look in WebKit-based browsers--that would be Chrome and Safari-- and that gives me a great idea about standards-compliant browsers. But we know that there are some older browsers out there that are not quite as savvy, shall we say. We want to check our work there as well. As you can see, I'm working on a Mac. How do I check a PC environment? Again, BrowserLab to the rescue. BrowserLab is one of the Adobe CS Live services, and you can use it standalone. You don't even have to be using Dreamweaver. But if you are using Dreamweaver CS5.5, it's built right in-- this integration that allows me to be looking at my page right here and then go and take a look in any browser of my choice supported by the BrowserLab service. The way we do that is one of two ways. Either I can select it here from my list of browsers, or I can simply click Preview in my BrowserLab panel. It's up to me. So let's go ahead and click Preview. That's going to tell Dreamweaver to go start my browser and take me over to BrowserLab. I'm actually connecting to a [whispering] super top secret version of BrowserLab, as we are filming this before the actual product has been released, a new version of this service has been released. So that's why I'm actually going to show you some new features that you've never seen in BrowserLab before. What is happening right now if we look back over in Dreamweaver is that Dreamweaver is actually communicating with the BrowserLab service and uploading copies of my local files up to the BrowserLab service and then rendering them in the browsers of my choice. So let's head back over. It looks like some of our screen shots are already being processed. Let's head back over into BrowserLab and take a look. We can see that one of my browsers has already come up. Oh! Internet Explorer 7. I'm definitely going to have to work on that one. But others like Internet Explorer 9, since I was doing so much HTML5 and CSS3, are already looking great. Sometimes you even want to compare what does one browser look like in comparison with another. BrowserLab allows me to look at that as well, you see, because I'll change my view from my 1-up default view to a 2-up view. That way I can pick another browser such as one of those more compliant browsers, Chrome 8, running on Windows. We can see those pages side by side. We can scroll around, move around, so that we can actually compare the layouts. And hey, you know what? Between Internet Explorer 9 and Chrome, we're not seeing very many differences at all. This is actually very fabulous. But I told you there was a secret. You might notice there's some orange highlighting here. Don't get scared. This is not something that I just accidentally left turned on back over on my Dreamweaver page. In fact, we didn't even see this because this is a new feature of BrowserLab. When we finally implement this in the finished version of the service, it will look a little bit different. But for now, what it's actually showing me are links in my page. That's right, links. Those familiar with BrowserLab might know that up to now, BrowserLab was a static picture. We're looking at a static picture. Let me go back to my 1-up view here just so you can see. That means that it would be just like taking a screen shot and sending it off to my client. But in the new BrowserLab, I can actually click on my links. And hey, BrowserLab is now communicated back with Dreamweaver and said, "Greg clicked a link. We need more files." So Dreamweaver has handed off those files, and we're now previewing that page inside of BrowserLab. And hey, if I click a link and keep clicking links and I want to go back somewhere, that would be a history, and BrowserLab now supports history as well. So as I click Back in my history, we're moving back through the pages that I had already looked at. So you can see with BrowserLab it's really exciting and getting even better. You've probably heard a lot about native video out there in the Internet. It's all abuzz with HTML5 video. And Dreamweaver has that support built right in. In fact, our designer called out a spot for some native video on our layout. Right now I've just simply got a page here that we're looking at in Live View. So we're seeing exactly the way that this page is going to render in the browser, and this particular element is nothing more than an image. Let's take a peek behind the scenes in our Split View so that you can see, yes, this is in fact just an image. We want to get rid of that and replace it with some native video. When I say native, I mean video that is played back in the browser without the need for a plug-in. So let's go ahead and take this and just delete it, actually, from our code so that you can also see. I'll just back up a little bit. I'm going to tap my Return key, and you'll see that Dreamweaver is popping up my code hinting as I begin to type my HTML tags. And as I've mentioned in other videos, Dreamweaver supports all those great new elements of HTML5, and one of them is video. So let's go ahead and begin to type, and there we have our video element. When we use native video, we need to make a decision as to exactly which browsers we're going to support because with the video element, we actually have to encode multiple times to cover all of the individual devices out there. When I tap my space bar, Dreamweaver is providing code hinting for the video element. And one of those attributes would be my SRC attribute. We only use this attribute if we are specifically going to support a single browser or a single platform. For example, if I knew that I was going out only to i devices with this particular page, then I could go ahead and fill out the SRC property. But instead what I'm going to do is I'm going to go ahead and just end off my tag and ask Dreamweaver to close that tag for me, and I'm going to add in a second element, and that is actually the source element. This allows me to specify multiple encodings. So I'm going to use the source element and then an SRC-- the SRC being the video that I'm going to link to. I'm going to have Dreamweaver just browse me over here onto my hard drive, where I can find my Video folder, and I've got three different encodings. One is an MP4. This is an H264 file. We'll go ahead and choose that as the first source. Next I'll hit a space and add a second attribute, which is the type attribute. This is to tell the browser exactly what it is that it's looking at-- in this particular case, a video that is encoded in H264. This is not a mandatory attribute, but it is nice to give the browser a little heads up that, hey, this is actually what we're dealing with here. I'll go ahead and close that source tag off. And again, I would add in another source tag, another SRC, and so on because I have to provide other encodings. We'll provide an ogg video, which would be supported by our Firefox browsers. And again, we'll do that same type and video/ogg, which is our ogg. And then finally, we've heard a lot of talk in the video community about another type of video, and that would be our WebM format that is supported by the latest versions of Chrome and Firefox and Opera as well. So we'll go ahead and just type that one. [keys clicking] And that is WebM. With all of that done, we actually are providing video to all of these modern browsers that support native video and our devices such as our iPads or mobile devices. And again, we can see this all happening right here inside of Dreamweaver. I'm going to click back over into Dreamweaver. Let's scroll down a little bit. Of course we're not seeing it. Oh, wait a second! A fish. What is this? This isn't actually what I wanted. Hmm. I do see some controls here. Let's go ahead and play this. Oh, my video is actually playing. But where did that fish come from? Another one of those great things that we have to offer with HTML5 is something called a poster frame. I'm going to go ahead and set in a poster frame, so we'll go back into our video element and we'll type, "poster" and then we'll just browse over to an image that we want to use. So we'll just go into my Image folder, and I've actually got a video poster frame, so we'll just scroll down and find that video-poster.jpg. There we go. That's actually what I would prefer people to see before they actually click to play the video. Let's go ahead and reload and see our page there. And there we go--much, much nicer. As I said, this is only going to be playing for browsers that support native HTML5 video. If we want to support Internet Explorer--ah, who wants to do that? Well, I'm sure we probably all do. Prior to Internet Explorer 9, I'm going to have to do something else in order to provide a fallback for those browsers. And Dreamweaver can help me out here as well because with Dreamweaver CS5.5, we have a new insert element up here in my Insert panel called Widget. By clicking the widget, what I'm going to do is actually launch my Widget browser. The Widget browser is a separate application that connects up to the Adobe Exchange and allows me to download widgets or things that other people have built in order to do things that I don't want to simply do by hand. And one of those things is a video player. It's called the Kaltura video player. In fact, the Dreamweaver team actually created a version of the Kaltura video player that provides fallback from HTML5 video down to Flash when it is necessary. So if I'm viewing on a device that does not support HTML5 video or in a browser such as Internet Explorer that doesn't, I can use that video player. It's as simple as simply clicking into my Widget browser here. And I can either run with the defaults that the developer has given me, or I can create my own presets by simply going into my Configure options. I can change the themes that I'm working with, and that's going to show me differing loading screens, playing screens, and so on. And all of this, once I'm done, we're generating the code behind the scenes that I can either copy or, if I would prefer, I can save that preset so that I can use this over and over again and simply insert it right back in to my page. And in fact, that's what I've already done back over here in Dreamweaver. I'm actually using the Kaltura player to fall back so that everyone is going to be able to see my native video-- sometimes native, sometimes using Flash. The mobile Web. And how do we present content to those mobile devices? I'm here in Dreamweaver CS5.5, and you can see that we've got a page that looks great for our browser-based viewers; in other words, those guys that are visiting our site on a desktop browser. It's going to be great. We've used HTML5 and CSS3. But if we go out and look at this page on a mobile device such as an iPad or a mobile phone, we're going to see that the experience is not quite as optimum as it is in our browser. Here on my iPad the page actually looks quite good. In fact, it looks exactly like the page did over inside of Dreamweaver. But the problem is I'm still going to be pinching and zooming in order to read the content. And it's a constant move around and move around, panning and zooming. And that's on an iPad--a nice, big screen. When we get smaller on my Motorola Atrix, we can see that, wow, I can't even read the text there, so I'm definitely going to be zooming a lot and tapping to reformat and tapping to move back out. It's just not a great experience when CSS3 provides the capabilities for delivering a specific type of presentation to these devices. It's called media queries. Let's go back to Dreamweaver CS5.5. Notice that in Dreamweaver CS5.5 we have a Multiscreen Preview button. When I click the Multiscreen Preview button, I'm actually going to see my page divided up into three sections here in the preview for display on the phone, on the tablet, and on the desktop. And as we can see, it's actually the exact same layout, the same content, that we are already seeing back over on these mobile devices. But I want to change that presentation but just when you're on one of these types of devices. So I'm going to use the Media Queries button. When I click upon my Media Queries button, I have the option of specifying a CSS file for either this document or site-wide if I'm going to be using a lot of different pages, or if I am laying out a lot of different pages, this would probably be my option. But for right now, for the purpose of this demonstration, I'm just going to add these media queries to this document only. Additionally, devices out there in the mobile landscape vary from platform to platform and even from browser to browser on the various platforms, and for this reason, I'm actually going to have Dreamweaver write a little piece of metadata to actually tell the browsing device to report its true size. To get started quickly, I've got a Default Presets button that I can simply click, and that's going to lay out three different types of CSS files-- one for the phone, one for the tablet, and one for the desktop. Of course we can change the names of these and the attributes themselves. So I'm going to start with my phone, and maybe just for purposes of demonstration I'll just call this mobile instead. I want it to specify exactly what the width and height values are for that particular phone or device that I'm going to be viewing on. And one of the things that I want to make sure of is that we don't go beyond the specified parameters. So I have a max width value here that I'm going to change. I'm going to say that the maximum width would be 400 pixels. In other words, I don't want any device that is larger than 400 pixels to read this particular file. Again, if I was doing this all from scratch, I would begin by creating a new CSS file. But for the purposes of demonstration, I've actually got an existing file that I'm going to link to. So let's go into our CSS folder here, and notice that I have a mobile CSS file. I'm going to say, "I'd like to link to that mobile.css file." And then for my tablet I'll do the same. I'm going to then specify a minimum and a maximum width so that they do not overlap. Since I had a minimum width of 400 pixels on the phone, I'm going to say 401 as my minimum here, and then I'm going to say 800 for the maximum. That way I'm targeting any device that is between those two value ranges. Again, I'll just simply link over to my tablet.css file. And then finally for my desktop--that's my large screen, let's call that-- I'm going to say anything that is beyond that maximum range that we had for the tablet--in other words, that was 800 pixels, so I'm going to say 801-- I want to use my desktop or my large existing file. So we'll just ask for the large file. And now we've set up three different profiles. I can keep adding. Those were just my defaults. But if I click my Plus button, I can add a fourth, a fifth, a sixth, to specify all of the specific devices that I'm wanting to target. Once I've done all of this, I'll go ahead and click OK. We'll see that immediately things change. Here in my preview I'm actually seeing something definitely did happen here in this phone and tablet view. Down in my desktop view it still looks exactly the same as it did before. But in the tablet view, if I begin to scroll down, we'll notice that, wow, I've definitely got some changes that have happened right here. These changes are reflected in that CSS file. Going to my phone, let's scroll over just a little bit-- oops, and I've got a little bit of a redraw issue here, but we'll see in just a moment that my phone has actually changed as well. Let me go ahead and close this window here. Going back into Dreamweaver, I've set these values up, I've set these layouts up, but here in Dreamweaver I'm only seeing my desktop view. So what if I wanted to make some alterations to my phone or my tablet view to fix any of the problems that I might have on those devices? I don't know how to do that, but Dreamweaver CS5.5 comes to the rescue once again. First let me just go ahead and go into Split View just so you can see something. Oh, wow! Did you see that? Did you see it happen? Let me go back out into Design View one more time. Now I'll go into Split View. Watch the layout happening here as I go into Split View. Something has definitely happened here. Yep, something has definitely happened. And what has happened? Dreamweaver is reacting to the width of the Design View window. Let's go ahead and sort of scroll back out just a little bit and see if we can get beyond that size. And of course it's probably going to make me go all the way--oh, there we go. When we reached whatever that was--800 pixel level--it switched over to become that view. Of course it makes it sort of hard to type in this small of a source code window. That's why you don't have to do this. You also have the option of going down to our Media Manager, our window size manager and saying, "Hey, you know what? I'm going to be working on a 320x480 smartphone." "I want to have that view." Or, "I'm going to be working on a tablet, and I'll go ahead and switch to that view." You can see that now Dreamweaver is actually displaying that. But it was doing that before, so let's switch to the phone view. And there we have the phone view being displayed. I've obviously got some changes here that I need to make in order to satisfy my viewers on these devices. I've already done that, just like in any good cooking show. Let me go ahead and show you that finished file. So here's my finished file. I'll turn on Live View for you so that you can see that here again is the default view that we have inside of our browser experience. And then if we switch down to our tablet view, again, that other experience. Every now and then you might need to hit the Refresh button just in order to get the page to refresh to exactly the way the browser would see it because your browser or iPad is not going to be changing sizes like we are doing here inside of Dreamweaver. So I'm going to go on down to my phone view, and you can see here we have our phone view optimized for that particular experience. And again, the proof would be in the pudding, so let's actually go and take a look over on our devices to see that that experience has now been applied across all three, starting here on our desktop with our full size browser experience and then moving over into our iPad, where you can see this page looks completely different on my iPad. We can scroll down a little bit further to see the entire page has been stacked from three columns down into a single, very wide column. Of course we know that on touch screen devices hitting things can be very difficult. So for my mobile experience I've actually taken my navigation and made it have much larger buttons that will be much easier for me to hit. A much better experience and, again, still seeing the other content scrolling down below, just as we did on the iPad. If you've watched some of my other videos, you know that I've built a page that now has different media queries to take us from a desktop view down to my iPad and down to my mobile phone. And on my mobile phone and on my iPad you'll notice that my content is not complete in each of the individual sections. In other words, we've chopped it off so that the person doesn't have to scroll so far with their fingers. But you'll notice that I have some little arrow icons. When I tap that on both my iPad and my mobile phone, we see that the rest of the content is then displayed. And if I go down to the bottom and want to close that back up, I can tap to close it up, and we see that happening on both devices. That's not HTML, that's not CSS; that is JavaScript. And I've used the jQuery framework to help me add that particular functionality. Let me show you how by returning over here to Dreamweaver, where I'm looking at my page in Live View using my Media Manager here, my Media Queries Manager, to show how this looks on my smartphone. As I scroll down here in Live View, I'm still in Live View; therefore, that means I can still interact. So if I click upon this particular button here in Live View, I can actually see the piece expanding, see the piece contracting back up just as I did over on my iPad and on my mobile device. Again, this was all JavaScript. It's actually behind the scenes right now here, so let me go into my Split View so that you can see my Live View alongside of that JS file, that actual JavaScript file. Again, if you've worked with JavaScript and specifically with the jQuery framework, this code will look pretty familiar to you: my dollar sign representing jQuery, and I've opened a parentheses and then a function doing my document ready saying, "Let's do all of this stuff as the page loads." Up to now, jQuery and Dreamweaver were friends, but they weren't good friends. In other words, you could do jQuery using Dreamweaver, but you had to really know what you were doing. We provided no code hinting whatsoever. But with Dreamweaver CS5.5, we wanted to change all that. So let me show you. I'm just going to repeat this line right here, this line of code, just to show you how it was actually written. Just follow along here as I create a new line of code. I'm going to start with my dollar sign and that open parentheses that we see. Immediately Dreamweaver says, "Hey, wait a second. I got it." "You're writing jQuery. I'm going to help you out." When it sees that opening parentheses sign, it says, "There are two things "and only two things that can follow this opening parentheses just like this," and that is, one, a call to my document itself or, two, a call to this, which in this case is whatever the object is that we are dealing with, and that happens to be the More button that we are inside of. Don't worry about all of that because we are just simply going to say, "Okay, Dreamweaver. That is actually what I'm talking about--this button." "So help me out here and let me know what I can do." So I'm going to close off that parentheses. In JavaScript and, therefore, in jQuery as well, we use a dot to specify methods and commands, if you will. So I'll type the dot, and there we see brand new code hinting showing us everything that you can do in jQuery. This is a long list of code here. And obviously I don't want to scroll all the way through there looking for the individual item that I'm interested in. We know, because we're looking and we're copying the line above, that I'm looking for that prevUntil. This is a command in jQuery that says, "Navigate up the tree until we find a particular item." So I'm just going to say, "Okay, let's do that. Let's prevUntil," and just complete that. And now this is where the magic gets going. I'm going to use that open quote. I type a single quote, but I got two because Dreamweaver knows hey, if you're going to open a quote, you're going to have to close it because we're dealing with JavaScript here. So it has actually already given me the closing quote and moved my cursor back into position for me. At this moment, it's showing me my HTML library. So it's saying, "You can select any element in HTML." But we know I'm not interested in that. I'm interested in a class, that class that has the name of eqHeight. So I want to go find that element. When I type the period, watch what happens. Dreamweaver has now given me a list of all of the CSS classes that I have defined in this particular document. If I back up and do a pound sign, here are all of the IDs in that particular page. So let's go back and find that eqHeight, just write that, and let it complete that writing for us. I'll close off my parentheses and we will continue. This is one of the unique things about the jQuery library is we can string commands together. If you've done regular JavaScript development, you know that this is not possible. We have to declare each command, if you will, on its own line. It's all done sequentially. A lot of trouble. And so that's why jQuery is so popular. It can shortcut all of that for us. So I'm just going to simply say, "Period, let's do something else." Once we've navigated up the tree-- in our case, we've found the three columns that we've been working with throughout all of my videos here--we've found those, and this is now what we want to do. We want to go down and filter their content, find something specific. So again, I will begin typing "filter," and we will go right down to that particular element. We're going to say, "I want to filter a selector." And which one? We're going to say, "Well, I'm looking for one that is control." So as I begin to type, you'll notice that I have a lot of typing, that C-O-N-T is going to be repeated three times here. I want to go directly down to that control, so you know what? I'm going to type just something unique. Let's try R-O-L. Oh, wow. R-O-L got me right down to this particular item because that was unique, and Dreamweaver is able to filter through all of its code hinting. Whether we're talking about jQuery in this particular case or CSS or HTML or just straight JavaScript, we're able to filter that based on what you type. So intelligently doing so, I'm going to say, "Let's go to that control." And now what we're going to do is just have it remove the class that was on there, which is another great and wonderful thing that is so easy to do with Dreamweaver. Remove class. Wow. I'm going to be typing a lot. I'll bet there's no V-E-C-L. Ah, right! That's another unique thing in there. So I'm just going to go for that. Let's remove that class. Again, which one? We'll say the control. Oops! The class. Sorry. You'll notice, by the way, I didn't have to type the period because Dreamweaver knows. It says, "Hey, you're removing a class." "Obviously the period is to say that it is a class." So the class just has a name. So let's go ahead and type that. I should have done that same thing again--but there we go-- to get down to control so I didn't have to type the C-O-N-T. But there we go. Now we've removed it. And the last thing is we're going to add on that toggle, and you can see that that was done just by simply adding a class. Add a class just the same way that we did a moment ago. And here are my available ones, and there we go. My friends, this-- Whoops! That is, if I've got it right here. I should have let it close my parentheses off. There we go. So as you can see, Dreamweaver CS5.5 makes easy work of not only JavaScript but working with the jQuery framework, the most popular framework out there. jQuery you may already be familiar with. But the team at jQuery has expanded beyond simple desktop JavaScript frameworks and it is now offering the jQuery Mobile framework that Adobe is happy to be a sponsor of and contributor back to the project. As part of that, we've integrated jQuery Mobile directly here into Dreamweaver CS5.5. Let's take a look. I'm going to start by just creating a brand new HTML document using my New Document command. And instead of using one of my blank starter templates as you might be familiar with, I'm simply going to click on Page From Sample and go to my Mobile Starters folder, where you can see that I have three different starter layouts to begin with. The first one is jQuery Mobile, and it has CDN beside it. This is a mobile framework or a mobile page that is linking back to the mobile framework stored out on a CDN, out on a Google code respository, if you will, that we can link to to always ensure that we have the most current version of the jQuery Mobile framework. If you're building things and you want to have a little bit more control, you want to have control over which version of jQuery that you're working with, or perhaps you're going to package this up on your own, then you might want to use the jQuery Mobile Local option. This means that we're going to actually copy the jQuery files into your site definition and have everything on your local computer. I'm going to do that for the purposes of demonstration here. I'll go ahead and create this as an HTML5 document. You can see once we have created this, we have what appears to be page one, two, three, four. Hmm. Looks very interesting, but I'm not sure what this is. If we look down through our code on the left-hand side, you can see that this is simply a page that's been created with a bunch of divs, each div having an ID of page and a role of page. Let me explain a little bit to you about the way that jQuery Mobile works. A jQuery Mobile site, if you will, can be a collection of pages just as we're familiar with. But it also can be a self-contained single page where divs represent the pages themselves. What does all this look like? Well, I'm sure you've probably gone to a site on a mobile device-- on your iPhone or your Android phone-- and it sort of looked not like a regular website but more like an application. This is what the jQuery Mobile framework offers for us. Let's go ahead and save this page first so that you can see a couple of things happening. We'll save this as jqmobile.html in my site definition. Once I save this, Dreamweaver immediately says, "Hey, remember you chose that option of jQuery Mobile Local." In other words, it says, "I'm going to offer to copy over all of the necessary elements-- "the CSS, the JavaScript, and perhaps any images that might be needed" in order to represent this particular page for us into our local site definition. So let's go ahead and let it do that. Again, no changes here beyond just the linking to those JavaScript and CSS files. But watch what happens now when we turn on our Live View. Clicking Live View, wow, we actually see the representation as the JavaScript and the CSS has kicked in. We see we have page one--okay, that's the one we're on-- then page two, three, and four. If we click on an individual page, we're actually--oh, wow--animated-- not just taken over there, we're animated over to that particular page. I didn't see a Back here in my page. If I look down through the code, nope. I'm on page three. Looking down at page three, I certainly do not see a Back button in page three. This is because the jQuery Mobile framework has actually created that Back button dynamically, and it is attached to the browsing history of the viewer. So when I click upon it, we go back to the page from which we came. What if I wanted to customize this, make it my own, maybe add a page? What would I do? Of course I'm going to scroll down here to the bottom where we see the end of that page called page four, and I want to add a new page. Of course I could probably just copy and paste but, even better, Dreamweaver CS5.5 offers jQuery Mobile objects or widgets to drag and drop onto our page. I want to put a new page in there, as I said, so here is the page element. When I click to insert that, we're actually inserting it--oh, whoops. That was actually clicked right before page five, so let me just cut that out and go place my cursor in here after page four. There we go. It doesn't really matter the order because we're going to link to these elements. This one has an ID of page five. Dreamweaver has intelligently looked at the layout and assigned a unique ID for me. Now I can go ahead and make changes here. So let's say my header, this is, "Greg's page," and the content would be some content from me, say, "Some content from Greg." And this is where we want to see when we go to that page. Looking back over here in our page one, however, we don't even have the ability to get to page five. Why? Because each one of those elements here--page two, page three, page four-- they are actually links. And if we scroll back up here, in page one we can see it's just an unordered list. So I'm going to copy and then I'm going to paste another link, and I'm going to link over to the ID of page five. And we'll call that Greg's page. So we'll change the text, and that's where I would like to go. As I click back in my Live View, we can see that Greg's page has been added. As I click on Greg's page, we're taken over to that page that I just created for you, hitting the Back button back to our home once again. This is really amazing, and it's just CSS and JavaScript and some HTML markup. Being that it's CSS means that we also could change the look of the pieces on the page. Of course if you want, you can dive in and do this all by hand. But one of the things that I'm most excited about with the jQuery Mobile framework is that I don't have to hand code my CSS if I don't want to to make sweeping changes to my application. Let's say, for example, that we want to change this. We don't want it to have this dark color scheme. Well, one of the other great things that jQuery Mobile framework offers is theming. If I just hit my space bar in my code, you can see that I'm given hints for attributes that are available to me for the div that I'm currently in. jQuery Mobile extends HTML5. Using the data object, you can see that I'll drill down to data, and as I type that dash, we have a whole bunch of other things that we can do, such as the data theme. So I'm going to choose data-theme here, and notice that now I have a list of six different themes that I can use. Let's try B because A is the default. It's the one that we're looking at. When I click back over in my page to have it refresh, you can see that I have a completely different look, sort of an old school iPhone look, if you will. And if I want to make another change, again just simply change to, say, C and have our page refresh again, and there's a much lighter scheme. I sort of was partial to that B, so let's go back to that. So we'll go take a look at this on our mobile device. Let's go ahead and hit our Go button here to connect. And there we have our connection. And again, I can tap to move between my pages, just as I would be experiencing on a mobile device. So my site has been optimized for this mobile viewing experience using the jQuery Mobile framework. Dreamweaver CS5.5 can work together with your web application building skills-- your HTML, CSS, and JavaScript skills-- to create native applications for the Android and iOS platforms. Let's take a look here in Dreamweaver CS5.5 where I've got a page that doesn't look all that exciting. It might look a little bit more exciting if I turn on my Live View. When I do so, you'll see that, wow, I've got something that looks a lot like a mobile application. In fact, that has been built with the jQuery Mobile framework. I'm going to go ahead and just prove that to you by going into my Split View, where you can see that, sure enough, we have data roles of page and so on, all the things that we know from the jQuery Mobile framework. But this is looking like a regular web page. Let's go ahead and see what it might look like on a phone by just changing our Live View to represent the mobile phone. There you go. That's much, much better. And as you can see, when you click upon buttons and navigate to new pages, you'll notice I have a couple of buttons here-- one that would actually hopefully place a phone call and another one that is actually going to map the location of the restaurant. These are things that would not be necessarily possible with an application that we were just seeing on the Web. If I'm looking at my browser on my desktop, how am I going to make a phone call? But they are capabilities that we would expect when viewing an application on a device. And of course we want to do this not just as a Web application-- in other words, confined to the browser--we actually want to be native, to actually put this as a native application in the App Store or in the Android Marketplace and have people either be able to download that for free or perhaps even make money off of it by downloading onto their devices. Again, in order to do this, I'm going to need a little bit of help. So I've built everything here in Dreamweaver using the jQuery Mobile framework to get me navigating between the individual pages or states of my application. But to make it an application itself, I need the help of PhoneGap. PhoneGap is a framework that allows us to compile HTML, CSS, and JavaScript into native applications for the Android platform and the iOS platforms, and we're going to do it right here in Dreamweaver CS5.5. To begin, we're going to simply go up here to our Site menu where I'm going to choose my Mobile Applications option. And I'm going to choose first of all to Configure Application Framework. The framework is actually the SDK, the parts that are coming from Google or from Apple that are telling us about the devices that we're going to be running on, giving us access to libraries that do specific things on those devices. If you've never installed an SDK, I've got some great news for you. You notice this Easy Install button right here? I can click the Easy Install button and have Dreamweaver actually connect out to the Google servers and download the Android SDK all automatically, set it all up for me automatically. I don't even have to do a thing. For the iOS side of things it's a little bit more involved because we have to first register as an Apple developer. And we can do that by simply clicking this link, and it will take us over to where we can download the SDK for the iOS platform. Once we've got our SDKs downloaded--and again, I'm only going to be working with the Android platform today--I'll just simply go back to my Site menu and specify my application settings. In the Application Settings, these are things like, first of all, where is it that we're going to be outputting our application to? And in my case, I'm going to be going directly to the desktop. Of course there are other things that are needed to be known, things like who am I, who created this, maybe do we want an icon. I've actually created an icon. I'll go ahead and show that to you so that you will be able to identify this a little bit later. So there's the icon that I want to use as my icon on the desktop. In my mobile device I've got a splash screen that I want to use, so I've identified all of these individual elements. And finally, I'm going to identify the target OS versions that I'm going out to. Once I've done all of this--I'll go ahead and cancel here--I'm ready to package it up. Compiling an application may be beyond the scope of what you do as a normal Web developer. But using Dreamweaver CS5.5, it's as easy as simply telling it, "Do you want to just build it, or do you want to build it and test it in a virtual device?" I'm going to say, "Let's build it and test it in a virtual device right now." I'll go ahead and click my Android emulation, and that's going to tell Dreamweaver to go out on my computer and check to see, first of all, do we have the emulator running? If it is, we'll go ahead and use it. Otherwise, as you've just seen, we're going to go ahead and launch the emulator. Once we've launched the emulator and it's loaded up, we're going to build that actual application, that project, right here from inside of Dreamweaver but not really because, actually, it's PhoneGap that's doing the work right now. This does take a few seconds to accomplish because the Android emulator has to start up, has to act like a real phone, and we then have to move the application onto the phone itself--the emulator, as it were. Once that is done, you'll see that we're going to be able to work with this application exactly as if we were doing it on a phone. And now we see that Dreamweaver has successfully created the application and has actually told us where it's put our project. And, even better, if we head over into our emulator, you can actually see there is our application running in the emulator. If I go ahead and click upon one of those buttons, we'll see that this slides over and does our animation. Don't be alarmed in just a little bit of learning that the Android emulator is not fast. This is probably one of the slowest emulations that you can go through. But it gives us a good idea of the functionality. For example, if we wanted to call this restaurant, we could just click the Call button, and that's going to take us to the dial screen and fill in the number for us. Let's go ahead and hit the Back button to move back over there. What if we wanted to know where that particular restaurant was? We could map it, of course. In the emulator, I'm not actually truly online, so I'm just tossing up a fake map right now for you. But we'll see how that looks when we see it on our real device because now we actually have a real running application. That means we can take that finished--in the case of our example here-- Android application, upload it to the Marketplace, and distribute that out to the world, or if we have gone ahead and downloaded the iOS framework, done the same for the iOS side of things, putting that in the App Store. I'm sure you don't believe me entirely, so let's take a look. I've got my device running right here. I've actually already done that, compiled the application, and now if we head over to my device, here we can see there is the icon, there's that Meridian icon. If I click it, we're going to launch up. There is that splash screen that you saw. And in just a moment, as soon as the app is finished loading, here we have it. And again, I can go ahead and click for one of these restaurants. I'm going to slide over there. Again, the same functionality you saw. I'm going to ask to dial. We'll go back, we'll ask where is that particular restaurant, and once I've clicked, we're actually loading up and using geolocation on the phone to find our location and then map the restaurant that we've chosen on the map as well. Let's go take another one just to see what that looks like. And there we go. That one is down a little bit to the southwest of us. So we have been able to build this entirely native application using jQuery Mobile, using Dreamweaver CS5.5, and using the PhoneGap framework not only for Android but also for the iOS. So we now think that it's going to be amazing for us as Web professionals being able to use our HTML, our CSS, and our JavaScript skills to build native applications right within Dreamweaver CS5.5. [ADOBE TV] [tv.adobe.com]