by-expression blog

Basic HTML

Lately on many of the groups I belong to for both Dreamweaver & Expression Web I’ve been seeing a lot of posts by people who don’t seem to understand the very basics of HTML. Web pages use HTML- HyperText Mark-up Language to structure their web pages. The most basic of HTML elements are headings, paragraphs, lists, tables images & forms. Other html elements that are, or should be in fairly common  use include address and code.

Every browser has a default presentation for each of these (and other elements not in the above list) so that if you are the web page creator has not provided any presentation there will still be an obvious structure.

To demonstrate this I’ve put together a couple of pages (I recommend right clicking on the following links to open them in a new window for viewing).

• A page with the html elements listed above minus form elements, images and table
• The same page with borders around each of the html elements

If you open the page with borders in multiple browsers you will be able to see some of the differences between browser defaults pretty clearly. For example if you view the borders page in IE 8 you will see:

Notice that the background color on the html element was set to a spring green which you see because the body element (pale yellow) uses margin to add space between it and the sides of the browser.  This is the most common way of adding space but the amount of margin and padding can vary from one browser to another which may not be noticeable when viewed even side by side.

For example using SuperPreview I overlay IE 8 on Win 7 and Safari on the Mac

 

Next in SuperPreview I overlay IE 8 on Win 7 and Safari on the Mac you can see differences  when you look at the browser side by side with borders.

On a page as simple as the ones used in this article the variations between browsers is not likely to be significant but when you start really designing a site with many graphical elements unless you understand the browser defaults and how to change them so that the display is consistent across all the major browsers your page could break quite badly. Image what a page with dropdown and a more complex layout design would look like if the elements were not in the same relative positions between one browser and another. In the following SuperPreview capture you will see a page that uses CSS to give a consistent cross browser display that is as close to pixel perfect between IE 8 & Safari 4 on the Mac as you are likely to see without any of the display differences shown in the overlay above that uses browser defaults.

 

 

 

 

You can test out the above page yourself at http://wise-clips.com/camping/index.html which will eventually be available in a more advanced tutorial on this site.

Testing Tools

While I used SuperPreview for Expression Web 4 in creating this blog post there are other alternatives available for you to test cross browser.  To compare IE 6 with later versions of IE you can use the free SuperPreview for Internet Explorer but that will not get you the capability of comparing with any non-IE browser. If you have Dreamweaver CS 5 you can launch BrowserLab directly in your program as I did using Expression Web 4’s SuperPreview. If you are using an older version of Dreamweaver or some other editor you can sign up for the online version of BrowserLab

More on Expression Web v4

Here are a few things you might want to do when you migrate from Expression Web 3 to Expression Web 4.

1. Expression Web 4 Add-in FriendlyIn this month’s just released Newsletter has an article by Mike Lissick, Senior Software Development Engineer on the Expression Web team on the new JavaScript add-in model for Expression Web 4.
2. How to Install Add-insGo to Tools > Add-ins then click the install button and browse to the folder where you have the .xadd file. 
3. Migrate existing file definitions To fully migrate your sites from version 3 to version 4 you would need to copy just the:%APPDATA%\Microsoft\Expression\Web 3\SiteDatadirectory to the equivalent Web 4 location. From Paul Bartholomew
4. Expression Web fails to load - Kapersky Internet Security 2010 Expression Web apparently has hooks into Internet Explorer, possibly to allow for Preview in Browser & SuperPreview to function. Unchecking “block dangerious scripts in Microsoft Internet Explorer” seems to resolve the issue according to this thread in the EW Forum UPDATE: Apparently this is a variation of a known Kapersky issue that has surfaced with other programs as well. There are a couple of other workarounds in the thread that have worked for others without completely disabling some of the protection.
5. SuperPreviewIf you find an inaccurate rendering or encounter any other problem with SuperPreview rendering send a bug report including the url & browser where the rendering problem is occuring to superbug@microsoft.com

Expression Web 4

I know that I’m running a little late with this post since the launch was hours ago but I have been on the road the last couple of days with limited internet connections outside of my iPhone. Typing a review on my iPhone just isn’t going to happen and I didn’t get a chance to write one up before leaving my office so hopefully this will be worth the wait.

What’s new?

In the order of what makes me happiest about this new release:

1. A new extensibility model, you no longer have to use Visual Studio to create add-ins for Expression Web. You can now make add-ins with html, css, javascript and a manifest file (xml). This is going to really expand the ability for more people to make add-ins for Expression Web. Since this is a model similar to those used by Dreamweaver extension makers hopefully this will cause more of the to make add-ins for Expression Web. WebAssist has already announced their re-entry into the Expression Web add-ins market place with the return of PayPal and Eric Meyer’s Site Sculpture add-ins (coming later this summer), and new PHP add-ins not available before. They are offering significant discounts of up to 50% off their new extensions. Anna Ulrick has an article on how to create add-ins for Expression Web 4 at http://blogs.msdn.com/b/xweb/archive/2010/06/07/easily-create-an-add-in-for-expression-web-4-with-the-add-in-builder.aspx 
2. SuperPreview Remote, you will now be able to view what your site looks like on a Mac running Safari without having to purchase a Mac. DOM syntax highlighting was added.
3. Limited toolbar customization, you won’t be able to customize the existing toolbars but you will be able to create your own “Favorites” toolbar. (Add in to create it coming soon per Paul Bartholomew who provided this screenshot in this Expression Web Forum thread.
4. SEO Reports, I tend to be a believer in organic search engine optimization (SEO) and rely on content and incoming links but there are new tools in Expression Web to help you with search engine optimization. Choose SEO options, display an SEO report, filter the results in the SEO report, and step forward and back through the list of results in the SEO report to see more detail for individual list items.
5. Changes to publishing, check Paul’s response in this thread on publishing issues which discusses the new changes including the addition of new menu items/keyboard shortcuts for publishing on the Site menu for current file, changed files & all files.

Bug fixes, I wish there were more but overall I’ve found Expression Web v4 to be a little faster and fewer bugs. There are still some issues with slow updating on pages with lots of hyperlinks & tables but they haven’t affected me so I can’t say whether every instance of those bugs have been fixed or not. It would appear not from the thread I referenced in item 3 above.

Should You Upgrade?

If you have Expression Web 3 upgrading is a no-brainer since the upgrade is free. If you have an older version, I’d upgrade as well. If you have add-ins that work only in a specific older version of Expression Web keep it installed side by side so you can still use your existing add-ins.

Any Reason Not to Upgrade?

There is a change to the licensing terms of Expression Web 4 and the rest of the Expression Studio. In the previous versions you could install the application on as many computers as you personally used since it was licensed per user. The license terms have changed and it is now licensed like most other Microsoft applications. You can install on on one computer and maybe a second portable computer but I’m not 100% certain about that. I’m trying to get some clarification on how you would deactivate on a computer you have already activated your copy on so that you can transfer it to say a new computer. I’m particularly interested in this information since I am hoping to get a new computer in the next month or so.

Arrogance & Ignorance

I followed a link tweeted by Smashing Magazine today to be greeted with:

“You’re using old, unsafe and very slow browser, use Firefox/Chrome/Safari instead.”

Don’t you just love folks who spell out their biases so clearly?

Since IE 8 runs considerably faster than Firefox 3.x on my Windows 7 computer I don’t think the person really knows what he’s talking about. (Note I don’t know if the person behind that site is male or female so my “he” is used to include both.) Besides, I use a tablet PC and Firefox doesn’t properly register the system caret so I my input panel isn’t triggered for me to use things like forms on web pages. That’s also a problem for many assistive device users who would might want to use Firefox. So while it is on my computer and I use it regularly for testing and troubleshooting websites it isn’t my primary browser and cannot be until that issue is fixed. (Back in the early days there was an extensions that enabled pen use but the code has changed too much for the folks who created that extension to keep it functioning in FF 3.x.)

Apple has a history of creating pretty crappy software for Windows computers so Safari is only installed on my Mac. Besides it is the first browser to fall in hacking contests lifehacker.com.au safari falls first and everything falls eventually in browser hacking competition

Not being a fan of Google’s privacy policies my company doesn’t allow Google apps and that includes Chrome on computers they pay for unless they are isolated in a virtual machine w/o access to material stored on the hard drive.

Ironically, the article goes on to say that the CSS 3 effect used won’t work in Firefox until 3.7 is released. So until then you need to use jQuery to get the effect in Firefox which is exactly the same way you get it to work in Internet Explorer.

Daft to Say Static Sites are “Dying”

I’ve got several Google Alerts set up and one that came in to day pointed to an opinion piece in PC Pro Magazine “Dreamweaver is Dying” http://www.pcpro.co.uk/blogs/2009/03/05/dreamweaver-is-dying/ from a current thread on a NetObject Fusion forum talking about how “static” sites are dead and “long live Drupal”. (Does anyone besides me find it ironic that this thread is on the web forum from a point and click WSYIWYG web editor support forum?)

I’ve seen similar posts in other places going back as much as 8 years ago with the only difference is the CMS proclaiming that static sites are dead in favor of PHPNuke instead of Drupal or Joomla or DotNetNuke. Yet, here we are with sales of Dreamweaver and Expression Web showing little signs of decline. The number of online site builders offered not only by services such as MySpace, Intuit (for business sites), Office Live,  but as part of hosting with your own domain for as little as $3 a month has expanded exponentially. That doesn’t even begin to count the number of low end entry level do it yourself web editors like  CoffeeCup, EZWebBuilder, Namo and yes, even NetObject Fusion and those are just the a few of the hundreds of Windows web editors. There are plenty for Macs starting with iWeb, Rapidweaver (good choice if you don’t have the budget for Dreamweaver) and at least a hundred others. Even Linux has WYSIWYG web editors like Kompozer, EditLive and Quanta.

When I read some of the posts from people who say that all websites “now” should be “dynamic” and “database” driven I can’t help but laugh because many sites don’t need the added layers of complexity that using a full rich backend adds. Take the AmeriVespa site I last blogged about. It uses Drupal. I know this only because I looked at the code yet I can see no reason other than possibly the registration page that benefits from using Drupal. Yet, the registration page submits the form to PayPal.

The site uses 15 base stylesheets and 1 IE conditional stylesheet (that breaks the site in IE 6+). The only rationale I can find for using Drupal is so that the event organizers can update pages but I can’t say I’ve noticed updates in the almost three months that I’ve been visiting the site.  There are only 5-6 pages that would need updating regarding the event and they could be easily handled by something much simpler to deal with like ContentSeed, InContext Unity or QuickChange without the need for back-end databases or a dozen stylesheets to control the look and feel.

The web is a very diverse place and many sites simply do not need the complexity of a full fledged, feature rich CMS system. For every site that needs the capabilities of a Drupal or Community Server there are probably at least a hundred that are a brochure site with minimal updates. Sites that need robust back-ends are those that have ecommerce with a variety of products, large sites that are frequently updated by multiple people, those who are active bloggers or have active forums/social networking going on. (I’m not including inserting your twitter or facebook feed on your site’s home page in this category either.)

Unless you believe that the brochure and small business sites and single event/activity sites are going to go away to say static sites are “dead” is just plain daft.

Amerivespa.org

Many of you know that I ride scooters. This year Vespa Club of America is having then annual rally just down the highway from me in San Antonio Memorial Day weekend this year.

I have been looking at their website http://amerivespa.org off and on for a few months. Mostly I've been looking at the daily schedule and lodging pages. Every time I visit I get annoyed. So I just have to vent a little.

Why?

Because this is what I see in IE 8 (same in 6 & 7):

• Notice the footer overlap?
• See the huge horizontal scrollbar at 1024x768?

(note these are thumbnails, click to see 750px version)

Here is the same page seen in Firefox on Win 7 (which displays the same as Safari on my Mac:

Does this look like they ever tested how their Drupal theme looks in IE?

True it is possible to use the site through it is very difficult to read the registration link. At least the link does function and I was able to register but the site poor usability in Internet Explorer 7 & 8 (according to Adobe Browserlabs and MS SuperPreview the same overlaps and horizontal scroll exist in IE 6 as well) leaves visitors using those browser with a broken experience.

Ironically when I look at the code I see a conditional comment for IE that loads a separate IE stylesheet which is what I think is breaking the site since it converts floating divs into absolutely positioned ones:

#main {
   position: absolute;
   margin-top: 20px;
   margin-left: 344px;
}

Position: absolute;

Which moves the entire content section 344px to the left creating the huge horizontal scroll and removing that content from the document flow which brings the footer up directly under the loco causing the overlap.

This is a prime example of why I consider using position: absolute is a bad idea.

Using old hacks creates problems

Other hacks are used as discovered when I pasted the page into Expression Web such as:

#page {
   _text-align: left; /* 2nd part of IE5/IE6quirks centering hack */
}

Why is that hack still in the stylesheet? Simple solution regarding IE 6-  the doctype switch is being used since an XHTML Strict doctype is specified so no quirks mode code should be in the page.  Is anyone really still concerned with IE 5? Get rid of the old hacks and if you are going to use IE conditional code limit it to appropriate versions, in this case LTE IE 5 not all versions of IE.

Using a CMS

Adding an additional layer of complexity is the use of Drupal which seems like serious overkill for this site. Maybe there were plans to add a forum or something that didn’t materialize which is why Drupal was used but so far I haven’t seen it.

Conclusion

I’ve never understood why people create websites that don’t render well in major browsers. To me that means a site needs to render well in the major browsers. My list of must display well in are:

• Internet Explorer 7 & 8
• Firefox 3.x
• Safari (Mac)
• Opera

Internet Explorer 6 must be functional but it can lose some of the bells and whistles as long as it is functional and reasonably attractive. There is nothing difficult about making this site render properly in IE 6+ and it is ridiculous that the page displays so poorly in IE 7 & 8.

What do you think?

I'm with Adobe

I rarely join social media groups and until today had only joined linked in groups. Today I made an exception and joined the faceable group in this post's title http://www.facebook.com/group.php?gid=113492765344092.

Today's announcement on how apps must be developed flabbergasted me. could you image the reaction if Microsoft did the same thing?

Ironic isn't of that so many of the Mac/Apple fanatics stated using Apple computers because of Adobe Photoshop and other Creative Suite applications?

While I've never been a big Apple fan I have and still do own Macs. Some of their devices like iPods and iPhones I have been very happy with but that is about to change and doubt I will be buying any new Apple device in the future.

I was not happy with the inclusion and heavy promotion of iAds in yesterday's iPhone OS announcement. After all I pay AT&T for bandwidth and purchase apps. Getting an ad every 3 minutes wastes my time & bandwidth. Neither Apple nor the app makers are paying my mouthy charges nor have they offered to pay for over bandwidth charges.

Seems the folks who have been saying Apple wants to destroy the open web may well have been right. http://www.chausse.org/2010/01/how-apple-will-destroy-the-web/ 

Fortunately, when I was at the Microsoft MVP Summit last month I had a dance to play with the new Windows 7 phones and was very impressed. Audible books now play properly which along with mobile Safari is what motivated my switch  to an iPhone. The new mobile browser supports Flash & Silverlight and is light years ahead of the last Windows Mobile phone I had plus it is sexy, thinner than my iPhone and brilliant screen graphics. Oh and it isn't tied to AT&T. Once my kids find out by can play their xBox games on it I can hear the begging begin. ;-)

Centering a web page

I think how to center the contents on a web page is the single most common request on the Expression Web forum (but not in my Dreamweaver group).

You need 3 things to center a page:

1. A valid doctype (EW does this by default)
2. A container with a defined width (typically a div with an ID of container applied to it.)
3. In the style definition for the container you need to have margin-left: auto; and margin-right: auto;

What you must not have are:

1. Any position: absolute on divs or other elements on the page.
2. Use of the spacebar ( ) to position elements - use margin, padding and/or floats instead.

Our Mail List

Even though we have closed our forums pending the migration to the new platform I wanted to remind people that we have a companion mail list over on Google at http://groups.google.com/group/by-expression-web-designer/ if you want to join the discussions there.

MVP Summit 2010

Tomorrow I leave for the MVP Summit in Bellevue/Redmond, Washington. Where later this week along with other Expression MVPs I’ll get a chance to sit down the the Expression Web team. While there we will have a chance to discuss some of the things:

1. Are a problem in Expression Web 3 and want to see fixed either in a service pack or at least not appear in the next version.
2. Features that should be in Expression Web and are not.
3. Future of Expression Web & other programs in the Expression Studio.
4. A public beta of Expression Web 4 (after all there was one for v1 & v2 and I think many of the issues with v3 would not have been in the program when it was released last July IF there had been a public beta.)
5. Whatever else we can think of to bring up.

If you have something to say (besides wild rants) that you would like me or one of the other attending MVPs up with the Expression Web team, let us know. I promise to raise your issues. Whether or not I’ll be able to tell you what response I get that I can’t promise to tell since like the other MVPs that are attending the MVP Summit I have an NDA (non disclosure agreement) which means I may not be able to tell you the MS response.  Even with an NDA there is a lot of things Microsoft doesn’t tell me so an answer I receive might be the exact same one you’d get asking your question on the MS forums but I will try to at least make MS aware of your feedback.

So what would you like me to discuss with Microsoft? I’ll look here for your comment or you can sent it to me on my twitter account: cdwise

TSA Screening insanity

While I don’t normally post on this blog anything that is not related to Web Design (focusing on Expression Web, Dreamweaver and web standards) sitting at Denver International Airport I can’t help but comment on my experience today.

I’m ashamed of my government right now.

To give a little background I was scheduled to fly out of Denver Airport back to Houston on Tuesday after spending Christmas in Breckenridge, CO with my in-laws. Two days ago I received a phone call that told me my aunt had passed away and the funeral would be on Monday. So I went to the Southwest Airline website and changed my flight from going to Houston on Tuesday to going to Nashville on Saturday. I applied the cost of my ticket to Houston to my new Nashville flight and paid the difference using my Southwest Visa. One associated with my frequent flyer account (which has enough miles in the last year for 4 free round trip flights so I think you can say that I am a frequent traveler.)

So today I arrive at Denver airport after driving through a snow storm from Breckenridge, go to the Business Select check-in for my one bag I’m taking to the funeral. Then I go to security. From the Business/First Class line I pull my computer out, take off my shoes, put my coat in the bin and put my computer backpack (with my purse inside it) and go through the metal detector.

The TSA guy then says step in here, put your feet on the yellow marks and raise your hands over your head”. I asked him if this was one of the full body scanners and he said “yes”. So I refused. I’ve seen how those scanner work on Good Morning America last week and frankly, I consider them to be unreasonable search under the US constitution. So I’m told to go in this glass booth while they call a female TSA officer to do a full body pat down. She arrives and is pleasant & business like (other than a comment on how soft my sweater is.) No real problem there though having to sit down while the soles of my feet are patted down through my thin socks was rather silly.

The TSA guy who was put out by my refusing to be subject to a full body scan tells the others that my carry-ons are to be subject to a level 2 security search. So now I get to walk in my stocking feet over to the tables set aside for such screenings. I will say that one of the other officers kept my computer, purse & computer bag where I could see them at all times while the pat down was taking place. Something that I appreciated.

Now over to the tables, where every compartment of my computer bag was opened and every pocket emptied. My iPhone & its case, my external hard drive & its case, the adapter for my computer, my GPS, my pocket camera & Flip were all wiped down with some explosive detector. Every compartment or pocket of my computer bag that held an electronic device was wiped separately with an explosive detector as was my shoes and the inside of my purse that held no electronics at all.

I was then told that I could have my possessions back. So I start repacking my bag since things were left hanging out of pockets so that the zippers wouldn’t close and I couldn’t put  everything back in it that had been there before TSA searched. When  I was partially repacked the TSA checker came back and said they needed to re-xray my purse, wallet and iPhone/case. WTF? When he returned with those items he started going through two of the compartments AGAIN. There he found a credit card size tool I was given at TechED 2008. The tool consisted of a sliding case that had a compass on the outside. When the case was open a square with a bottle opener was exposed. One side was marked so you could measure (in 2” increments), a flat screwdriver blade was on one corner while the other had a can opener with a small point. This was confiscated and I was told I could exit the security line, return to the Southwest desk and check my computer bag. Right, I don’t know about any of you but my laptop isn’t going to be checked on any flight much less one that is delayed over an hour (so far).

Now you may have noticed that I said this little tool was given to me at TechED 2008 and has lived in my computer bag ever since. Since that time I have taken at almost two dozen flights where I have passed through security with that tool in my bag. Its gone to Denver at least 4 times, to Seattle, to California, to Nashville (for my grandmother’s funeral March 2009) and not once has it been questioned but today when I refused a full body scan which if I had seen it I would have simply chosen one of the other 11 security lines that didn’t have a full body scanner behind the regular scanner) it suddenly is too dangerous to allow me to take on an airplane. Never mind that even if someone had a lot more strength than I do would never penetrate to a depth that would cause more than a surface wound. I could do more damage with the ball point pen in my computer bag than I could with that tool. Oops, guess I shouldn’t have said that since next time they’ll confiscate my ballpoint pens from my bag.

I’m in favor of security at airports but I’m not in favor of violating our constitution in the name of “security” when those security measures violate the U.S. Constitution’s guarantee against unreasonable search and seizure. Maybe it is time for me to put my attorney’s hat back on and join the ACLU or something but frankly the only reason that I was singled out for this intensive scrutiny seems to be because I did not submit to having a full body scan.

My so called “last minute ticket” given as a partial reason for the level two screening was nothing more than a change in an itinerary book a month earlier. I checked bags, paid with a credit card that was linked to a frequent flyer account that would show trips booked with anywhere from 1 day’s notice to three months notice (depending on why I was traveling – business, family emergency or vacation).  You tell me how a middle aged female traveler with an extensive history of airline travel within the US (and some overseas to such threatening countries as England, France & Mexico) is such a threat that every item in a standard computer bag needs to be searched, tested for explosives and subject to a full body search (either by hand or machine)?

I want to know what happened to the constitutional guarantee against unreasonable search & seizure under the 4th amendment to our constitution.

Merry Christmas

 

Training

People have been asking me about learning a variety of web technologist Obviously when we reopen Start to Web I will recommend our classes <g> but we only offer a limited curriculum. For a wider offering I recommend Lynda.com which includes javascript, php and other scripting. I even have discounts codes available.

Houston Techfest

For those of you who weren't there or even if you weren't the PDF of my Expression Web 3 -What's New presentation is now available.

WebsiteSpark

Most of you know that I’ve been avoiding writing in my blog while in the process of migrating this site over (I just didn’t want to have more stuff to migrate and keep in sync) but this new offer from Microsoft is worth going ahead and writing up (twice since I’ve already exported posts from here). Take a look at ScottGu’s blog http://weblogs.asp.net/scottgu/archive/2009/09/24/announcing-the-websitespark-program.aspx

If you are a small company (even a SOHO as long as there are less than 10 folks at your company) for $100 payable when you leave the program (max participation is 3 years) you get licenses for Expression Studio 1), Expression Web (2), Visual Studio.NET Pro (not Standard), 4 cpus license for Windows Web Server, SQL Web and an ASP.NET web hosting control panel that you can use in production. (So if you want to host your own sites/colocate you have a production license for that server) plus a listing on the MS site for potential customers to find you.

Sweet deal, especially since you get support – 2 telephone support incidents, free training and what they are calling “managed newsgroups”. I’m particularly interested in that last one since to me that means there will be actual MS support personnel who are paid to respond to posts there.

Beyond the max of 10 employees of the company the only other requirement that I could find is that you have to add the url of a website you create using the products that come with WebsiteSpark within 6 months of your enrollment application being approved.

I’ve already signed up (and been approved and even have invite codes I can send out) so we’ll see what happens next.