What is the different between the "b" and "strong" tags? What are "phrase" tags for screen readers?
Posted by jerothe in 
This was a topic that I thought I understood, but apparently I didn’t.
Up until yesterday, my understand was that <strong> was always better to use, especially for accessibility reasons for those web users who are hindered in their web surfing. My understanding a couple of months back was that Screen Readers actually read HTML code out loud with the text, and for that reason, it was better to use <strong> to mark up important words because “strong” read out loud meant a lot more than “b”.
I hadn’t connected the ideas, but when I was looking at a tutorial the other day things came together for me.
It is ok from a validation standpoint to use the <b> tag, it isn’t depreciated in XHTML 1.0, and it does the same thing that <strong> does visually.
The key is in how the screen reader interprets the tag. A “bold” tag doesn’t mean anything to a screen reader, it is purely there for visual markup reasons. But if we use the “strong” tag, not only will it bold the text visually on screen, but it will also be emphasized when read by the screen reader.
So keep this in the back of your mind when choosing your HTML markup. Don’t just bold something because, but because you want it to be emphasized. Your impaired users will thank you that your web page makes sense read out loud as well as to those who read it when they visit.
Shortcuts for marking up a paragraph or a comment in Dreamweaver.
I came across these accidentally the other day, but they both rocked my world when I did. I use HTML comments all the time, and I also am constantly marking up pieces of copy with paragraph tags. Now I know the shortcut keypress in Dreamweaver to achieve this.
The shortcut to markup HTML code with a comment;
Step 1: In Dreamweaver, go to Edit > Keyboard Shortcuts > Snippts > Comments > (Comment Single Line or Comment Multi Line)
Step 2: Set a shortcut keypress. If you haven’t done anything already with making your own shortcuts, you will need to make a duplicate set. (Obviously, since this is a shortcut, there is a place in the code palette under snippets to add these comments. But we want this to be quick.)
Step 3: When you’ve reset the shortcut hit “Ok“.
Step 4: Highlight a piece of text in Code View and hit your shortcut. Dreamweaver should put it in an HTML comment.
That is a shortcut keypress for an HTML comment. Now, the shortcut in Dreamweaver to enclose something in paragraph tags.
Step 1: Go to Code View. Highlight the piece of text that you want to be a paragraph.
Step 2: Press Ctrl + Shift + P
Like the comment, you can do this from the regular menus, but you want to be quick about it. If you want to know where it is located, just go up to Insert > HTML > Text Objects > Paragraph. Either way, you should now have two awesome shortcuts in your arsenal for quickly marking up code with a comment or a paragraph tag.
How do I change the product order in the vertical category component?
As I always assume you know Interchange some already, I will also assume that you are relatively familiar with the predominant category vertical component that is in the base store and is usually located on the left side of the homepage. There is a certain order to which those products display, and that order may be important for your targeted users. You may want them to see Strawberry Jam before they see Orange Preserves.
The change you need to make is in the admin interface. I could go into a big explanation of how to log in, but you should know how to do that already. So, login to your Interchange site admin interface.
Step 1: In that interface, you will see a tab called Miscellaneous. Click that tab, or look at the image below.
Step 2: Click on the link on the lefthand side that says Layout Editor.
Step 3: Click on the Category name that you want to change the order for.
The screen will now change and you will have a whole new slew of options to choose from. You will see a Select Area that has the title Contains.
Step 4: You should see your products for this category listed here. Click the category name and click the button that says either Sort Category Higher or Sort Category Lower depending on whether you want to move the product up or down in order.
That’s it. To the point. There are a ton of other options in there, ones I haven’t even dealt with. But this is a simple task that seems pretty common.
How do I take a single screenshot when working on a dual monitor setup? What are the shortcuts for screenshots on dual monitors?
I haven’t researched enough to know if this is specifically for the type of video card you have, but I believe it is a built in windows shortcut.
I have a dual monitor setup at home right now, two 17″ CRT’s. I often take screenshots for many different uses, when communicating with people, to keep the look of a website for reference as well as other reasons. Since I got my video card late last year for this setup, I have noticed that when taking a screenshot, it takes a shot of both of my screens together. The resolution is set at 2560 x 960, so before I was getting screenshots that were only 1280 x 1024 (960 is a video card increment), and now anytime I take a screenshot, I have to crop it down to the actual size I want.
Not anymore.
Most people know, to take a screenshot, you hit the “Print Screen” button on your keyboard. It is usually listed “Prt Scr” or some other abbreviation, and on my keyboard it is located up next to my F keys, right to the right of F12 and right above the Insert key.
To take a screenshot of the screen you are actively working all you have to do is hit this keyboard shortcut;
alt + Print Screen
When there is a dual monitor setup, you will only have one monitor, or usually program, active at one time. Whatever is active, that is the screenshot you will take.
Then of course open your favorite graphics editing program, even Windows Paint and paste in your screenshot and save;
Paste = Ctrl + V
Save = Ctrl + S
There you go, very helpful, and has changed my life since I learned it a couple of weeks ago.
How do I link stylesheets outside of the theme.cfg file and have them work in Interchange?
It’s been a long time since I posted, gosh, almost a year since I typed in this section. But now at work I am in the process of working on my second fully customizable interchange ecommerce website. I worked on one soon after I started, but that one fell through right near the end.
Let me back up, if you are already here, you probably know what interchange is, but it isn’t common knowledge, not as much as Smarty or Mambo. Interchange, in my limited understanding, is a flexible ecommerce open source code base written with a PERL base. The base setup or “store” as it is referred to has components that are customizable, and has in general a ton to work with, but is very confusing. I don’t tend to use the online admin interface too much, relying on my other development knowledge to allow me to work in Dreamweaver and Homesite primarily. Learn more at the interchange developers website.
Enough of that, what I am going to be discussing here today is simple, stylesheets in Interchange. In Interchange, all of the styles that make up the look of the “store” are located in the theme.cfg file. If you haven’t found this yet, you are really at a beginning level. Usually when I start a site, I have the base store, and in that store is this folder structure where your theme.cfg file should be located;
catalogs > shop1(Shop name) > templates > blueyellow (default store)
Catalogs is where you start, not public_html like traditional website data. In the public_html area there may actually be a link pointing back to the catalogs folder. Shop1 is the name I chose, but can be anything, you just have to pay attention. We have multiple shops set up for development before transfered to the primary server, all the way up to Shop5. Blueyellow is the default style the store is setup to appear online. You can change that in the admin interface, but that is a seperate entry in itself. You will see other styles in the templates folder, including purpleyellow and grayorange. All of the base “stores” look pretty much the same, except there are in a color scheme represented by the name, hence Blue – Yellow.
Within you chosen style folder (blueyellow) you should see a file called theme.cfg. Open this file in Homesite, Notepad, or some other text based editor and take a look at it. You will see something like this;
# This file defines the variables for templating.
ParseVariables Yes
# Theme images directory
Variable THEME blueyellow
Variable THEME_IMG_DIR __THEME__/
Variable THEME_LOGO __THEME_IMG_DIR__/logo.gif
ifdef LOGO
Variable THEME_LOGO __LOGO__
endif
##
## Set a default CSS theme which can be overriden in Preferences
##
ifndef THEME_CSS
Variable THEME_CSS >>EOV
>STYLE TYPE=”text/css”>
BODY { background-color: #FFFFFF;
font-family: Helvetica;
font-size: 12px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
TD { font-family: Helvetica;
And on and on….
Anyone with any basic HTML sense knows that the latter part of this is a stylesheet. This is what determines most of the look of the base Interchange store and can be edited to your liking. This is just a basic framework however, and if you are designing an Interchange site, I recommend pretty much starting from scratch unless your customer really doesn’t appreciate the benefits of an identity and branding.
Here is the kicker. In your browser you need to be logged into the admin interface as you are developing because everytime you change something in this sheet and ftp it to your server, the changes won’t take place until you click a link called “apply changes”. This basically recompiles the database and such with your changes and re-renders it out to the screen. This is one too many steps, and takes a ton of time. After a handful of sites, I said, there has got to be a better way to do this. I did find a different way that skips the “apply changes”, but structurally it isn’t the best.
I actually cut and removed all of the styles from the stylesheet and put them in a regular sheet with a .css extension. Then I made a styles directory in my images folder (in with templates, pages, and session among others) and published it to my server. I them made a regular link in my template regions to the sheet and published those. (Template regions is a whole other entry to write, but if you want to find your base templates, look in the “regions” folder once you are inside of the store base site like blueyellow)
This works! I was so happy. Publish and refresh the page and Interchange updates, no apply changes and wait for recompile. I do have a problem with the fact that it is not in a styles folder in the root of the site, but to save time this is more important.
Now, by doing it this way, it does become a stylesheet. You can parse through the sheet like you can when it is a theme.cfg file for any ITC variables through Interchange. That can be a downside I guess. I don’t really understand the point in how much time those variables really save, but maybe there are set more for consistency.
Today I actually explored putting the stylesheet in both the root, and in the pages directory, neither seem to work. I tried resetting the permissions on the directory and the file to match those set on images and their directories, but it didn’t seem to work. I assume that it is something I need to setup in one of the databases, but I am not sure. I am not a hardcore programmer, so most of that stuff is a little foreign to me.
Firefox 1.0.6 and some of the new features
Soon after Firefox 1.0.5 came out, version 1.0.6 followed. I guess there were some complaints that 1.0.5 broke some of the API. features, and the support for extensions got wacky. So, if Firefox didn’t already tell you to update, now is the time to do it, especially since broken extensions, in my opinion, would affect that many more people.
Go to Mozilla’s homepage to download your copy now.
Firefox’s Password Manager
Until about two weeks ago, I had real issues deleting my cookies. As far as I understood it, from a novice perspective, those small cookies were storing information like my passwords, which I have a hard time remembering. Especially since as of late, I have tried to make a point of making them harder to guess, which makes them that much harder for me to remember.
Firefox’s Password Manager is a little built is feature of the browser that will store all of your password’s, much like Robofill, or any other myriad of auto form filling softwares. Except, you don’t need a separate program, this comes with Firefox. It will auto fill the most recent password used, and if you don’t like that choice, you can then begin to type a different username, and Firefox will autofill the correct password.
Where is all of this information stored, you ask? Well that is easy. Let’s walk through how to access the password manager and how to set up a “Master Password” that will prompt on pages where you need
Step 1: Go to the Tools Menu and Select Options.
Step 2: Choose Privacy from the options, the one that looks like a little lock.
Step 3: In the middle area, you should see Saved Passwords, below Saved Form Information and above Download Manager History. Click the plus sign next to Saved Passwords and then choose View Saved Passwords.
At this point you can view your passwords. If you click the button Show Passwords, Firefox then will ask you for the Master Password in order to display then in another column to the right of Username. If you choose cancel, it just returns you to the same screen.
A Master Password, that is what we talked about before. To set that up, get back to your Saved Passwords area with the little plus button by clicking the close button. Then click the button that says Change Master Password.
This will give you a dialog box that allows you to type in your old password, and then type in a new password and confirm it. Firefox also has a little rating system that will give you a graphical rating on how good your password is, or in orders words, hard to guess.
If you don’t already have a password, I am actually not sure what happens here. I assume the button says Set Master Password. I know I only did it recently, but I have a very short memory.
From here on out, to use or display your passwords, you will only need to remember one password, your Master. Now you can surf to sites, add those passwords on your first visit, and then tell Firefox when it prompts you to “Remember the password for future use“. When you do this, it adds it to your list with some encryption and never again will you have to try to remember it.
There is talk that the next version will have support to integrate with other password security systems like Keychain on Mac OS X, and also allow you to import passwords from other programs / browsers. Good ol Mozilla, they are always thinking.
Firefox Google Search Shortcut
If you haven’t noticed, there is a little search box in the upper right of Firefox with a little G next to it. Most people know that this searches Google, and if you didn’t know, now you do.
But, countless times during the day, I would either use my quick one click button bookmarks I have setup in Firefox to visit Google’s site, or I would type it in really quick manually. It’s pretty short right? Well after typing it 20 times a day, that is a few min tues you could save with one keypress shortcut.
To get up to that search box without your mouse, all you have to press is this;
Ctrl + E or Ctrl + K
Both of these shortcuts will put your cursor in the search box, highlight any current text for deletion that is already there, and all you do is type and hit enter and you are at Google’s search results!
Now, there are other great one click searches in that box too, like Amazon and Ebay, which I will visit every once in awhile. I haven’t figured out the keypress to bring down the select menu to change which site you search, but those options are there too if you want to explore with your mouse.
But who wants to do that when we have such great keyboard shortcuts? Not me that is for sure.