Tips, web design book reviews, resources and observations for teaching and learning web development.
Teachers will love this post that tells you how to find the exact part of a YouTube video you want to show and create a link to just that section. Finding the right moment (and many more YouTube tricks).
How the iPad is Changing Education. From ReadWriteWeb.
I’m seeing a few rumors about what’s coming in Dreamweaver in Adobe CS6. Looks like more support for HTML5 and mobile design, including integrated PhoneGap. Adobe has a new HTML site at html.adobe.com.
A brilliant examples of interface design that Dreamweaver designers use with some regularity is the CSS rule definition dialog window in Dreamweaver. This window has been approximately the same since the days of Macromedia when it was first instituted.
For many past versions of Dreamweaver, this dialog box covered the full range of what you could do to a generate a selector and write CSS for it. Since CSS3, it’s starting to show signs of age. Some of the new possibilities with CSS3 aren’t available in the options in the rule definition window.
That doesn’t mean Dreamweaver doesn’t have them. You just need to know where to find them.
Logically enough, the place to look is the CSS Panel. In the lower left corner of the CSS Panel, there are icons that allow you to look at CSS properties using either list view or category view. Here’s an example for a rule that uses border-radius to create rounded corners. Look at list view in the properties pane.
In list view, you see the list of potential properties that could be applied. The view shown is at the beginning of the alphabet. Those properties that have rule declarations assigned are indicated with information showing the value assigned. List view includes vendor prefix options listed in alphabetical order.
The other icon at the lower left of the CSS panel that will show you CSS3 possibilities is Category View. Here’s a look at the same rule with category view showing in the properties pane.
The categories are revealed using an accordion style slider to hide or show options. I have the Border category revealed here. Among other things, you see the CSS3 border-radius property. In Category view, Mozilla, Opera, Webkit, and Microsoft have individual category sections where you can find vendor prefix options. Scroll down to find the categories for various vendors to create rules for border-radius (or other properties) with vendor prefixes.
Dreamweaver CS 5.5 has some built-in jQuery mobile functions that can help you design a mobile site. Going this route means one of two things:
I’ll show you the basics of how to get started and what Dreamweaver is doing for you.
Open a new blank page using the DOCTYPE of your choice. Choose the jQuery Mobile category in the Insert panel. Choose the icon for jQuery Mobile Page, the first icon on the left in this view. (I like the Classic Workspace. Your view of the Insert panel may be different from this if you don’t use that Workspace, but the jQuery Mobile category will contain the same icons.)
Two dialog boxes appear. The first wants you to indicate whether you want to use the remote jQuery Mobile scripts and stylesheet, or install them locally. For this exercise, I’ll leave them as remote, but that might not be the best choice for actual use.
The second asks you to assign an ID to the new mobile page. Dreamweaver suggest ‘page’ by default, which will be okay for this demo. You also choose whether or not to have a header and footer here.
Clicking OK brings you back to the Dreamweaver document window. Let take a look at what your choices on the previous two dialog windows inserted into the document. The Design View doesn’t look like much.
When you look at the Code View, you realize there’s a lot of work already done for you here.
It needs work, but you have a start.
Next, take a look at the rest of the options in the jQuery Mobile Category of the Insert panel.
The first one on the left is the JQuery Mobile Page icon, already mentioned. From left to right, the others are:
I’ll walk through inserting one of these to give you an idea of what Dreamweaver does with it. How about the List View? I’ll create a space for it after the generic Header text and click the JQuery Mobile List View icon.
A dialog window opens. You choose the type of list, the number of items in the list, and several other choices including some pre-styled options if you want to use a split button. I’ll pick “Star” from the split button icons.
You see this in Design View.
You see this is Live View.
This is what happened in Code View.
The other jQuery mobile icons work in a similar way. While this is just a beginning for you, it does get you off to an fast (and easy) start in designing a site specifically for mobile using jQuery Mobile scripts.
If you are interested in taking a different approach with Dreamweaver CS 5.5 to create a site designed to be responsive and work in all device sizes, see my e-book How to Create a Responsive Web Design in Dreamweaver CS 5.5. Explaining how Dreamweaver helps you do that is a long story, so I packaged it as an e-book and am charging a small fee to download it.
The possibility that you may want media queries to work in older browsers does exist. We normally think of media queries as only being used to create responsive designs, which implies modern browsers on devices like iPhone or iPad. However, there is a JavaScript you can use if you need to support older browsers for other reasons.
There is native support for media queries in Firefox 3.5+, Opera 7+, Safari 3+ and Chrome. For browsers older than that, you can use css3mediaqueries.js, available free from Google.
If you are a Dreamweaver user, or have used my e-book “How to Create a Responsive Web Site Using Dreamweaver CS 5.5,” be aware that this script does not work with @import stylesheets. See Media Queries 101 for some tips on how to use methods other than @import rules for media query styles.
I’ve been thinking of writing about using the Dreamweaver CS 5.5 interface to create media queries lately. Dreamweaver’s system works, but it isn’t easy to figure out and doesn’t match up with what you read in articles by Ethan Marcotte and other responsive design gurus. The interface doesn’t explain itself well, and offers very little intuitive understanding of what you are trying to do.
I wanted to rework my home page at vdebolt.com using Dreamweaver’s media query tools so I’d be sure I knew what I was doing before I started teaching Dreamweaver students how to use Dreamweaver to create a responsive design. My site is small and very simple–a perfect size for a brief class demo. It seemed a sensible idea to record my steps as I went through the process in Dreamweaver.
I quickly realized there was way too much information there to make it into a blog post. I ended up with 25 pages of text and images. An e-book seemed the perfect solution. I’m happy to announce the new e-book, available now: How to Create a Responsive Web Site Using Dreamweaver CS 5.5.
In the e-book, I start with a built-in Dreamweaver layout, adapt it so it will work with media queries, and then walk through the Dreamweaver WYSIWYG tools for adding media queries to make the layout responsive to various devices. I also talk about making images responsive in Dreamweaver.
The e-book costs $4.99. Order Here.
Adobe announced yesterday that it will stop developing the Flash Player for mobile devices. They will continue to support the Flash Player on desktop devices.
Their statement said,
Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.
Adobe also claims to be committed to using HTML5 on mobile devices. Adobe has made some moves in the direction of HTML5 in Dreamweaver CS 5 and CS 5.5. (I expect the next version of Dreamweaver to be much more oriented to HTML5.)
If you have Dreamweaver 5.5 and are wanting to use the new features for using Media Queries included, here are some resources to get to going.