WebTeacherTips Archives - Page 5 of 22

Google+ Hangouts now have a remote desktop feature

Another reason to join Google +, if you haven’t already, is the new remote desktop feature available in Google Hangouts. This gives you the ability to work on someone else’s desktop to demonstrate or troubleshoot while you are chatting in a hangout.

The feature is listed under the Hangout Apps menu.

If you are teaching online classes using software that does not allow for remote desktop work, adding Google Hangouts to your repertoire of tools might be a good idea. There is existing software that gives you remote desktop access, of course. LogMeIn and GoToMyPC probably are the best known. Will Google + overwhelm them?

To Underline or Not to Underline

Yesterday I mentioned at post by Dennis Lembree at WebAxe called Keep the Underline. Dennis talked about when an underline is a UX necessity. Here is his main point, with which I heartily agree:

You want an accessible, usable website? Then please don’t remove the underline on text links, particularly in the main content. Unfortunately this design trend continues on the web (and the same could be said about those awful form input labels that act like placeholders, ugh).

Why? For accessibility, users with color blindness or low vision may have trouble distinguishing links from regular text when the underline is missing. Also remember situational disability; links with no underline are usually more difficult to determine when using a poor monitor or when using a computer in a brightly lit environment.

Since I work with beginners, I often have the opposite problem. They want to underline things that should not be underlined.

Here’s the point for underline-happy beginners. An underline on a web page has a very specific meaning. It indicates a clickable link. When something is underlined for emphasis (or whatever reason exists in the creator’s mind) it confuses users because they expect it to be a link. Users may attempt to click on underlined words and – when nothing happens – the user will think your page doesn’t work. Users don’t understand what you’re doing and whatever you are trying to say gets fuzzed in meaning.

The user is lost, and your content will be abandoned because it doesn’t make sense in terms of web pages.

When you have links in the context of a paragraph, heading, list or anywhere outside an obvious nav bar, use the underline. But don’t underline anything that is not a link.

How to Modify a WordPress Stylesheet for a Child Theme

WordPress has many outstanding attributes that have helped to make it the most popular blogging platform in the world and one of these is the parent and child theme format. The introduction of this means that when modifications are made to a WordPress theme, upgrades to newer versions can be made without losing any of the new code. This is a huge bonus for website developers, who in the past, would have to spend hours finding customised code and applying them to upgraded themes.

Modifying a WordPress stylesheet for a child theme is a relatively simple process. The first step is to ensure that the child theme itself has been set up. To do this, you will first of all need to login to your FTP client and look at the WP content directory for the installed WordPress. Once there, enter the “themes” section and you will see a list of the themes available. If, for example, there is a theme there called “holiday” and you wish to create a child for it, you will now need to create a new folder and call it “holiday-child”.

The next step, is to create a valid stylesheet called style.css and put it in the folder. The easiest way to do this is to simply create one using your favourite text editor, save it and then transfer it via the FTP. The new stylesheet should contain the following minimum information.

/*
Theme Name:   my child theme
Theme URI:      http://mysite.com
Description:      This is my child theme I have created
Author:             My Name
Author URI:       http://mysite.com
Template:          parenttheme
Version:            0.1
*/

Although much of the information in the lines above is generic, the one thing that must be altered for the child theme to work is “parenttheme”. In the example we are using, this should read “holiday”. The theme name should also be renamed holiday-child.

Whilst the above stylesheet is valid, what will happen when it is activated is that the site will load without any new formatting, as of course, the stylesheet does not have any actual CSS in it at the moment! Adding the following code would load the parent themes CSS file inside the child theme, thus making the site formatted.

@import url(“../parenttheme/style.css”);

Again, the phrase “parenttheme” would be replaced with “holiday” in the example that we are using.

Once this has been done, it can be uploaded to the site via FTP.

The second step is to then activate the child theme. Having logged into WordPress admin area, you should navigate over to “Appearance>Themes” where you will see that the parent theme is currently active. If everything has worked correctly, you should also be able to see the new child theme listed below. Clicking on “Activate” will send this theme live.

Keen observers, upon checking their website, will notice that there has been no change. The reason for this is because at this stage no actual modifications have been made to the theme. All that has happened is that a child theme has been created.

To make modifications to the child theme, you now only need to edit the style.css file that you originally created in a text editor, and then upload it via FTP again.

The wonderful thing about doing it in this way is that any changes that are made do not impact on the parent theme. This means that if a massive mistake is made, then, the parent theme can simply be reactivated in order to get the site back up and running again. At the same time, if there is a core code update, the child theme will be unaffected. Due to the fact that the site cannot be “damaged” in any way by using child themes, it also provides a great opportunity to experiment with code and develop some web design skills in a safe environment.

Creating a child theme for your WordPress blog takes just a matter of minutes, and after that, editing the child theme is, to use a pun, child’s play itself. In no time at all, you will be able to create unique looking sites that when built upon a good parent theme, will rival any commercially available themes for none of the cost.

Guest author Richard McMunn is founder of How2become.com, the UK’s leading training and recruitment website for public sector careers. You can also find How2become on Facebook.

Dear I-Don’t-Know-Any-HTML Blogger

It’s true. You don’t need to know anything about HTML or CSS or JavaScript or any other techie stuff to write a blog. You have to fill in a few forms, choose a theme, answer some questions, and start writing.

Anyone can be a blogger.

That’s a good thing. That’s a great thing. We have plenty of wonderful bloggers in the world who are good at writing but don’t know much about what’s happening behind the scenes on their blog.

Which way do you roll?

Two things can happen when you write a blog without having any background knowledge about HTML, CSS and other web standards that make your blog work.

You can write your posts, use the simple formatting tools like headings, lists, bold and italic and push Publish.
You can write your posts and then fiddle with how things look by changing colors, alignment, fonts, and other appearance features.

If you do number 1, that is, stick with the way things are set to appear in your theme or template, you’re okay. Your theme or template has a style sheet (that’s the CSS) in place that determines appearance. Go with that and you’re golden.

If you do number 2, you are adding things into the post that aren’t in the theme style sheet. That means you are inserting stuff about appearance into the content of your post. You may not see it in what you write, but it’s happening behind the scenes in the HTML. Adding stuff about appearance into the content of your post is a problem.

You cannot predict what people are using to view your blog. It might be a smart phone, it might be a large monitor, it might be something in between. The style sheet for your theme probably has made allowances for this unpredictability – unless you are using a really old theme. But when you add appearance stuff right into the post, it doesn’t go into your style sheet and it might not adapt to different sized viewing devices.

In addition, added appearance stuff right in the post isn’t portable. By that I mean it makes it hard to reprint your post somewhere else and have it look good there. When you copy and paste somewhere else you carry along all that appearance stuff and it won’t look good in the new location. The new location for your brilliant post has its own style sheet, its own appearance, and you’re pasting in stuff that doesn’t work with that.

Some advice

I talked a bit about this in my post Web Teacher’s Seldom Asked Questions. I even made up a law about it called Virginia’s Law Against Unintended HTML. It goes like this:

Play with the way your content will look before the content is on the page, not after.

The bottom line for you don’t-know-anything-about-HTML bloggers is pick a theme you like and stick with that appearance. You do need to format your headings and lists and that sort of thing, but don’t fiddle with how those things look on the page after you’ve written them.

ARIA-WAI: A Roundup of Information on Web Teacher

There are a number of posts here at Web Teacher that provide information for front end developers about how to use ARIA-WAI in a page design to increase the accessibility of the page. Here’s a list of some articles I wrote. There are also many links to ARIA posts in my useful links category.

7 Top Posts for Dreamweaver Users

I’m thinking about older posts here on Web Teacher that would be of value to anyone learning either beginning or advance Dreamweaver techniques. This seems like a good time to point out some perennial favorites.

Why every front end developer should work for Marissa Mayer

iPhone 5 image from apple.com

Business Insider just published an article with the misleading headline Marissa Mayer Just Gave Every Yahoo Employee an iPhone 5. Every Yahoo employee worldwide is getting a new smart phone. The choices do include the Apple product mentioned in the headline, but are actually these:

iPhone 5
Samsung Galaxy S3
HTC One X
HTC EVO 4G LTE
Nokia Lumia 920

Mayer stated the reason for these company issued phones – which are replacing Blackberries – by saying,

Ideally, we’d like our employees to have devices similar to our users, so we can think and work as the majority of our users do.

My headline for this article was a bit of an overstatement as well. (Sorry.) I don’t really think every web dev needs to work for Marissa Mayer. But I do think she’s on to an essential principle of creating for the modern web: mobile rules the experience for many people.

Her move is fairly dramatic and will emphasize to all her employees that the mobile experience should be considered in everything they do. The mobile first, responsive design notion is gaining ground in the web design world, to be sure, but a dramatic move such as Marissa’s on the part of web educators to emphasize the concept is called for as well.

In computer labs all over the world, teachers could show budding developers how to put a shiny new web site on a server. Show them how to find it in a browser. And, as a standard practice in the classroom, have them look at it in their smart phone too. Students and front end developers need to look at their web sites with devices similar to their users just like Yahoo employees.

Are any web educators out there already making like Marissa Mayer and doing this in their classrooms?