Adobe Muse

by cdwise 11. October 2011 09:03

Last week at AdobeMAX I took advantage of the session on Muse to see just how this new WYSIWYG editor from Adobe does.  The idea is that you can create a good website w/o learning any code. Since I see a lot of posts from people who are shocked and surprised to learn that if you use Expression Web or Dreamweaver you really do need to learn at least some basic html & CSS code. So whenever I hear of an editor that claims to be able to do that if I have the opportunity I like to check it out.

My first though when the Muse session opened was – GoLive lives, in the cloud. Yep, Muse is one of the cloud based applications that Adobe is releasing using Air for the desktop portion.  Like GoLive Muse is aimed at the print person who wants to repurpose their content, layout and whatever else they have for the web but also wants to add media and other interactivity. So let’s see how well Adobe accomplishes that goal. NOTE: I’m using Beta 3 for this review. Expanded images are available if you double click the thumbnails.

new-siteFirst thing we see in creating a new website is a very print looking dialog box. Defaults include margin, padding, minimum height and columns with gutters.

Maybe because Muse comes in large part from the InDesign team, a program that I am hopeless when it comes to using, I found the interface to be non-intuitive. During the workshop it seemed things were much easier than when I tried to create a site of my own.

My first thought was to set up body element styles and some global settings such as what font to use on the site so I didn’t have to repeat it over and over again.

style-optionsUnfortunately I could not find that option either using the page properties shown in the image above or the Style Options. Other than paragraphs, headings and the odd choice of marquee there does not appear any way to set global styles.

So I gave up at least for current purposes and went with what Muse wanted to do. I selected what appeared to be the body element and gave it a background color. Then with show header/footer selected inserted content into those two areas to the best of my ability to determine what those locations were. Everything in Muse seems to be “rectangle” or “box” driven so my content was inserted per the instructions into the appropriate boxes. I was even able to wrap text around one image so that my finished page looks like:

finishedMake sure that you look at the larger image and you can view the resulting site live at:  My Muse Test Site  Here is the code generated for what I intended to be in the masthead section:

<div class="clearfix grpelem" id="n3"><!-- group -->
<div class="grpelem" id="n4"><!-- image -->
  <img id="n4_img" src="image/muse-test1.jpg" alt="" width="227" height="130"/>
</div>
<div class="clearfix grpelem" id="n6"><!-- content -->
  <p id="n8">My Muse Testing Site</p>
</div>
</div>

Recreating this section using normal html5 I would have:

<div id="masthead">
<img alt="Muse" height="130" src="image/muse-test1.jpg" width="227"><h1>
My Muse Testing Site</h1>
</div>

The difference in the CSS is even more dramatic. There are 13 style definitions applied to the “My Muse Testing Site” by Muse starting with a css reset which was inaccessible by any method I could discover while working within Muse. Using my normal page layout methods there are 4 style definitions applied to the same text: body, container, masthead & h1.  Compare the code in my version of the Muse site done right demo that I created. Note there are a few differences between the two in function and font sizes since unlike Adobe Muse I prefer scalable units of measurements.  I also did not create a mobile version but I may do so at some point just to see what differences would be necessary, I suspect the changes would be to to less than 6 style definitions.

When it comes to file size the Muse page (including mobile styles and javascript used for rollovers) comes in at 131k while my version comes in at 17k. Both use images for the menu background but I optimized the one image I used for css based rollovers in my version and use no javascript to accomplish it. As a result I do have to add ids to the menu elements to get the "active page” indicator on the menu which needs to be put into a style block on the page instead of the external stylesheet but that eliminates the need for javascript which I consider to be a good trade-off, at least on small sites.

The other images used on the site are exactly the same. The other differences besides a very bad case of divitis is that my version uses semantic mark-up. In other words lists are marked up as either ordered or unorderd and headings are actually headings.

I was really hoping that Muse would do better than it is proving to do since I would like a good WYSIWYG editor to recommend to the folks who don’t want to learn code but unfortunately Muse will not be it. The reliance on absolute positioning and over use of divs combined with the difficulty of creating semantic mark-up on the content rules it out.  The good news is since Muse is a beta product there may still be time to fix the worst of its mark-up before it is released.

Tags:

Review

New Site Templates

by cdwise 25. July 2011 23:02

I’ve uploaded three new templates to our template section. They are:

550-siteBoy Scouts USA
On various forums, mail lists and other groups I participate in websites for Boy Scouts, Girl Scouts and other youth groups are a common subject that volunteer webmasters seek help with. Since I have two boys I’ve found myself the webmaster for one troop or another. As a result I've put together a template that can be used or modified. NOTE: The content in this site comes primarily from the Boy Scouts of America or Golden Arrow District websites which makes content available for troops and packs. Please check that your organization has permission to use the content on your site. Download the boy-scout.zip

camp-550Camp Escalante
This site will eventually be the basis of a new basic website tutorial created with Expression Web 4. In this version there is a simple menu with directories set up for the site to grow into a multi-level more complex site with a dropdown menu which will be added in a second tutorial to be created as a next level tutorial.  Unfortunately, I cannot give you a time line for when these two tutorials will be available since these are “spare time” projects when time permits. Download the basic Camp Escalante camp.zip

550-screenBlades of Glory
I used this site in a presentation at HAL-PC’s Web Technology and Design SIG some time ago. While the basic one page version of the site without a menu or contact form has been available as an attachment to a blog post I recently completed the site by adding at menu, four additional pages including a contact form and php based processing script.  Some source files for the masthead are included in the images section. If you use them you must credit this site for the images. Download the blades.zip

Support for these tutorials will be available as always in our companion forums template section.

Tags:

Templates

Internet Explorer 9–March 14th

by cdwise 11. March 2011 05:22

MS has officially stated that Internet Explorer 9 will be released on March 14 at SXSW http://news.cnet.com/8301-13577_3-20041126-36.html. It appears from the RC documentation that there will be a compatiblity mode to show you how IE 8 and possibly IE 7 will render the page http://support.microsoft.com/kb/956197 Windows XP users won't be able to upgrade but frankly it is past time to get off XP in my opinion if you have any concern about security. We've got Win 7 running on netbooks faster than they ever ran XP.

With IE 8 being the second browser to fall in this year's PWN2OWN (3 hours, first was OS X/Safari where it took 5 sec to find the exploit and an hour to write the tools/test suite to prove it up) folks will be encouraged to upgrade quickly. MS usually starts pushing their new browsers via Windows updates within a month or two of release. For people running the beta version the RC was available on Windows Update so who knows how quickly they'll start pushing IE 9 out that way.

More information on compatiblity and how to trigger it at http://support.microsoft.com/kb/956197 There are free time bombed virtual machines for IE 6-8 available at http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en and I would expect they'll add an IE 9 one after release or you can simply update one of the ones already available to IE 9 for testing if you prefer to keep your IE versions separate. It looks like the VPCs are refreshed every 5 months or so which isn't too bad for testing purposes.

The IE 9 testdrive site is http://ie.microsoft.com/testdrive/ which shows you the state of HTML 5 support in the browser you currently have installed.

If you are using Dreamweaver here's the link for the CS 5 HTML 5 pack updater http://labs.adobe.com/downloads/html5pack.html which also includes a link to the extension for CS 3 & CS 4 users.

If you are using Expression Web 4 the add-in for HTML 5 support is at http://gallery.expression.microsoft.com/Web4HTML5SchemaAddIn no options for earlier version users that I'm aware of.

Tags:

Web Browsers

Modules 3-8 MS Expression Web curriculum

by cdwise 14. January 2011 09:43

Maybe because module 3 deals more with color theory, graphics and general design layout principles that don’t vary much between print and the web explains why other than the use of circa 2000-2002 graphics styles if find it pretty good.

Logos in module 4 is another good discussion but the  navigation section falls a little short with its emphasis on buttons, image maps and slicking but how to structure your navigation is worthwhile. Then emphasis on scanning seems a bit misplaced but what disturbed me more was telling the students to right click and download images for use in their project from Yahoo and other web pages. Especially after the first module’s discussion of copyright on the web. Much of the discussion re digital photography references things that have already happened though the composition related material is a useful introduction to digital photography.

Overall the modules on graphics are the best I’ve found in the entire series.

Module 5 – Beyond the Basics with Expression Web

When I opened the first assignment in this module – Scavenger Hunt I was immediately back in negative review mode since the first question was where to find the Layer Task Pane (which was renamed in v3 to Panel from Task Pane but I digress).  Layers seem to be emphasized and styles references include MsoNormal.  Can you hear me scream when the first CSS answer is given as:

Position absolute
Width 393px
Z-index 1

Others include Font Size= 12pt and <body><div#layer3><p.MsoNormal>

I do have to admit that in flipping through the PowerPoint slides (day 2) with Module 5:  Beyond the Basics with Expression Web 4 it is ironic that on slide 14 the screenshot clearly shows Expression Web 3. If they had only stayed away from using layers and dragging to size/position using the handles in design view I’d be able to give this module reasonable marks as far as the PowerPoint goes. The Beaches website created during this week could easily and probably more quickly be done using without using a single layer. See http://wizerways.net/beaches/index.html for how the basic site should have been coded.  I looked at the completed website and noticed that longdesc was used improperly as well. It shouldn’t have been used at all on a simple image, the alt attribute was more than adequate.

The actual assignments on using CSS, creating external stylesheets and DWTs are pretty well thought out and useful if the CSS taught wasn’t to use layers and interactive buttons instead of CSS rollovers. Remember that interactive buttons are a legacy from FrontPage and as such haven’t been updated in at least 8 years. Don’t use them.

Modules 6-7

These deal with the dynamics of working in a team and workflow. At this point I’m not going to critique these sections since while important aren’t things that relate to actually learning how to create a website so much as work skills.

Module 8

This final section covers launching your site from testing through publishing, search engine optimization and maintenance. Again, I didn’t spend any real time on these sections so I can’t critique them at this time. The topic timeline for this section looks good but the devil is in the details just as in Module 7 the “advanced” version of the Beaches site suffers from many of the same issues that the basic version does, especially with its concentration on layers and interactive buttons along with longdesc being used improperly.

In summary while I think the goal was good the reuse of old outdated material and the emphasis on what looks like an easy way to layout a site (layers) makes this material less useful than it should be for the educator. Pre-written courseware is not a substitute for the instructor having hands on knowledge of the subject they are teaching. If you are going to teach web design, especially to university or lower level students make sure that you teach them web standards or you will be doing them a disservice. If they leave your class with a firm foundation in HTML & CSS basics they will be in a position to understand and be capable of creating cross browser sites. They will also be prepared for changes that will come in the future as the web evolves whether they decide to create web sites professionally or not.

Tags:

Module 2 MS Expression Curriculum

by cdwise 14. January 2011 07:52

Moving on to Module 2 HTML Basics at least the PowerPoint does include common HTML elements and the critical fact that “web sites may appear differently in different browsers” Even though the browser list is still not reflecting the current browser make-up with no mention of the different rendering of IE 6, 7 & 8 or Chome/Opera while still displaying Netscape prominently.

Unfortunately, the first example given for students to copy does not include a single <p> element in the body yet shows as multiple paragraphs in the sample. In addition, as the coding lesson progress deprecated elements and attributes used solely for presentation such as <u> and <body text=”red”> are given as if they should actually be used on your web page.

Heading elements are also explained as a method of altering text size. – This is so wrong I can’t believe it is actually in a class on HTML. <u>, <body body link="#000fff vlink="#00FF00 alink="FF0000>  and other such code is taught. Even when CSS is introduced the use of font-size: 12pt and font-family with only one font listed is very bad practice. This is an actual sample of the code they use:

<body><h1>This is where the heading of the Web page might go.</h1><br>
<h2>This is where the main part of the text would go.</h2>

As is this example from the assignment as the correct way to create a web page:

<html>
<head>
<!--Student Name—>
<title>Hansel and Gretel</title>
<link rel="stylesheet" type="text/css" href="mypaStyle.css" />
</head>
<body>
<img src="C:\Documents and Settings\Owner.FAMILYROOM\Desktop\S.2.7.WS_Pic.jpg" height="100" width="150" align=right alt="Our Flag"> (note the align attribute)
<h1 align=center>Hansel and Gretel by the Brothers Grimm</h1>
<h3 align=center>Student Name</h3>
<hr width=90% size=10 color="#0000FF"><br>
<p>"Hansel and Gretel" is known as a fairy tale and was written by the Brothers Grimm.</p>
(snipped remaining paragraphs & links that are outside of paragraphs with br elements) </body>
</html>

Can you believe that the above mark-up is being taught today? Ironically, while the <marquee> tag is one of those being taught the module text document brings up HTML5 in the same discussion as Encarta is given as an additional resource – with a link that leads to this page has been discontinued.

This mix of old, deprecated code and resources with the occasional reference to today’s best practices seems not only an odd mix but also one that will leave students very confused about what they should do. Besides HTML basics should be mastered before the use of web services from Module 1 are even broached.

Tags:

Expression Web | Training

Online TV



Outstanding Hosting