Windows 8 May 31 Preview

by cdwise 12. June 2012 20:51

Downloaded the new release of Windows 8 and installed it on my Motion C900. First thing I find out is that according to the “compatibility” checker my touch screen is not “windows 8 compatible”. So only “basic” function will be available. I figure I can live with that and sooner or later a correct driver will be available as it was with the March preview.

So I proceed with the install only to find that I have to use a Microsoft ID to complete the install. If I provide an email address that isn’t a MS “Live” address it will create one using that ID. No thank you, if I do that no access to our intranet resources. I need a local user account to do that because cloud connectivity is restricted in our company. However, I provided my MSN credentials to complete the install. First, course of action after launching Win 8 is to go to the Control Panel and under User try to figure out how to change to a local account. Not as straight forward as it should be since the most obvious choice  of credential management didn’t do what I needed to do (not a Windows domain). I did find that you could change to a local account in your personal settings. There I was warned that my systems would not sync information and that I might have to actually log into apps to use them. Fine by me since cloud apps are something we can use in my work environment.

I thought I was doing an upgrade install only to discover that everything was deleted except the new apps and somehow the Epson printer is still work. Plus it left behind a windows.old folder that does nothing but take up space since it appears you cannot revert to it. Not a happy camper with this experience.

So for now this computer is incapable of doing any productive work since Office is no longer there and the bundled apps are not anything I can actually use for real work.

From what I see they keyboard and pen input hasn’t changed since the previous CTP, which means that it still taking up over half of my screen and doesn’t even have punctuation and numbers without changing to the other keyboard view. The option to have the full 101 keyboard seems to have been removed. This renders it useless as a tablet for inputing information into web forms in landscape orientation since over half of the screen is hidden by the keyboard.

For an OS touted to be a modern mobile computing platform for tablet devices this is unacceptable.

Off to search for drivers that will at least get me a screen resolution that does not distort the text to the point is it almost unreadable.

Tags:

Taking Advantage of CSS Inheritance

by cdwise 19. December 2011 21:45

I've been seeing a lot of posts asking for help with link styles on several of the mail lists and forums I belong to and thought I'd mention the benefits of using inheritance to slim down your CSS and make it a little easier to manage.

What I've been seeing is things like:

#menu a:link {
color: #CC0000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:visited {
color: #808080;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:active {
color: #800000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:hover {
color: #CC0000;
text-decoration: underline;
font: .85em Geneva, Tahoma, sans-serif bold;
}

Notice that you are repeating a lot of the same style property/definitions in each pseudo class when in most cases only one of the style definitions change. You can simplify this and make it easier to spot what changes in each pseudo class by using:

#menu a {
color: #CC0000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:visited {
color: #808080;
}
#menu a:active {
color: #800000;
}
#menu a:hover {
text-decoration: underline;
}

By using the a instead of the a:link all of the properties you define are inherited by all pseudo classes so that you only need to change the properties that vary in the state you are defining. This cuts down on your CSS code AND has the added benefit of making it far easier to see what the differences are in that state from the default link.

Tags:

CSS

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



Outstanding Hosting