web-education Archives - Page 5 of 71

The Basics of Choosing and Obtaining a Domain Name

Thinking of starting a new website? Two preliminary steps are choosing a domain name for your new site and then buying that domain name. Let’s take a look at some of the basics involved in that process.

Choosing a Domain Name

A good domain name is easy to remember and easy to spell. A domain name that’s easy to spell shouldn’t have characters like hyphens between words. It you want more than one word in the name, run them together like alistapart.com or webstandardssherpa.com. It’s a bit awkward to read, but for someone typing the domain name for A List Apart or Web Standards Sherpa in the location bar of a browser, it makes perfect sense.

Are you starting a website for an established business? Try to make the name reflect the business name and the branding that is already in place for the business. This may be a bit hard if it’s a commonly used name. For example, a Denver floor tile company might have trouble getting the name mountaintile.com. But perhaps denvermountaintile.com might be available.

If it’s a personal website, try to use your name. Karen McGrane owns karenmcgrane.com. How simple is that?

If it’s a blog where you’ll be exploring a particular point of view, pick a domain name that reflects your point of view. A name like Mountain Poet or Lesbian Dad tells you a story about what you can expect from the website before you’ve even visited.

Before you seek out a place to purchase the domain name, it’s good to have a few ideas ready to go. Your first choice might not be available.

Obtaining a Domain Name

Okay, you’ve got some ideas for a great domain name. It’s time to see what’s available for purchase.

There are literally thousands of places where you can buy a domain name. I use the domain name services connected to the hosting company where I do business. I like having the domain name company and the web hosting company connected. But I know people who think this is a bad idea. I think the reasoning of the people who think it’s a bad idea is that if one company shuts down suddenly, at least the other one still operates. If you choose an established company with a good history, I don’t think it’s something you need to worry about.

If you search for domain names on Google you get 84,000,000 results. There are a lot of choices! I’ll just pick one to use as an example. This does not imply that I endorse this company, it’s just an example. Also, prices vary, so the prices you see in these examples may be different from other domain name sellers.

At domain.com, you see something similar to what you see on any site where you want to purchase a domain name. You enter the name you are hoping to purchase. The site will tell you if the name is available. If it’s not available exactly as you want it, the site will suggest alternatives that are close to what you want.

I searched for vdebolt.com, my own domain name. Here’s what the tool told me.

The .com is gone, but other top level domains for that name are available.

I can’t buy vdebolt.com (duh, I already own it) but other top level domain name types are available like vdebolt.net or vdebolt.org. (Domain names are cheap. Many people buy several variations and direct them all to one site.)

If the name you want isn’t available, choosing whether or not to go with a .net or .org or some other .whatever is an option.

If you don’t want the .org or .net or .whatever, the tools usually suggest variations of the name based on your original search. Here are a few suggested to me:

A few of the suggested variations on my domain name.

Even better, create your own variations like the denvermountaintile.com example and use the search tool to see if it is available.

If you can’t get a name close to what you originally wanted, go back to step one and brainstorm a new idea. Keep trying until you eventually find a name that will work and is available.

You can buy the name for 1 year or for several. You’ll probably save a few dollars if you buy several years at a time. Don’t forget to renew it on time, or you might lose it!

You’re all set. Go build something awesome.

[Note: This post was originally published on Blogher.com.]

Grace Hopper: The Queen of Code

Grace Hopper: The Queen of Code is a documentary about Grace Hopper. It’s the latest film in FiveThirtyEight’s Signals series.

This is a short film and would be excellent to show students in a beginning computing or history of computing class.

CSS4 May Include Some Useful Pseudo Classes

The editor’s draft (emphasis on draft) for Level 4 Selectors from the W3C mentions some potential new pseudo selectors that the W3C describes as functional.

The matches-any Pseudo Class

This allows you to create a selector that targets a comma separated list of selectors. Here’s the syntax.

E:matches(selector1[, selector2, …]) {
    /* declarations */
}

For example

h1:matches(section, article, aside) {
    color: blue;
}

Another example, which selects a list of classes:

blockquote:matches(.pull, .feature, .break) { 
    color: blue; 
}

The negation Pseudo Class

The syntax:

E:not(negation-selector1[, negation-selector2, …]) {
    /* declarations */
}

In CSS3, only one selector was allow for this pseudo class. Now you can have a comma separated list as the syntax shows.

For example:

a:not([rel="prev"], [rel="next"]) {
    color: red;
}

The has Pseudo Class

This is a relational pseudo-class. It’s mentioned in the W3C draft document I mentioned, but it’s not mentioned in other places. I’m not sure if that means it’s brand new or was already discarded.

For example:

a:has(> img) {
     border: none;
}

That selector would remove a border from an <a> element that contain an <img> child.

Support?

You can check your efforts to work with these new CSS4 potential selectors using the test at css4-selectors.com. There’s also a list of all selectors from CSS1 to CSS4 on that site, but it does not mention the :has selector.

Resources for Material Design

Material Design is a set of design principles created by Google for developers creating apps for Android. They call it a design language. The concepts don’t apply only to Android, of course. Some of the resources I’ll mention below can be helpful to anyone.

You may be familiar with the way things designed this way look and work, because Google has deployed it on most of its sites since last June.

color blocks for picking a color scheme — The opening page of materialpalette.com

Material Palette is a bold color picking tool. Simply pick two colors and you are offered a color palette.

a group of colors with color codes — The color palette for blue and deep orange

Material Palette is quick, simple, and useful to any app developer.

To back up a bit, a definition and description of what Material Design is all about can be found at developer.android.com. It deals with more than color choices. The design concepts also involve animations, shadows, and drawables.

Google also provides a set of basics about Material Design. The Google site discusses the goals and principles of Material Design and goes on to explain style, animation and many more aspects of development using the concepts.

MaterialUp.com offers inspiration in the form of daily examples of how the concepts have been used in websites and apps. This site and Material Palette are interconnected.

Accessibility Teaching Materials: Free Download

I prepared a booklet (PDF) of materials that I use to teach a short class in web accessibility. There really isn’t a great resource for a class in web accessibility that covers the basics in just a few hours. I took some of my handouts and made such a resource for you. It’s a free download.

Get Accessibility Teaching Resources now. Free!

Using Clearfix to Clear Floats in a Layout

First, let’s review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared.

A technique used some time back was to add some element – a br or a div – with a class attached that applied clear:both. This br or div was inserted immediately after the elements that needed clearing. This element added no content, it simply cleared the float (or floats). This works, but it does add an unnecessary element into the HTML content.

Another technique put a clear:both rule in the element following the float (or floats) preceding it. So a footer element might be set to clear:both to move it below any floated elements above it. This works. It puts the clear after the elements that need to be cleared.

Example code for this type of clearing in a two column layout.

<div class="container">
 <header>
 . . .
 </header>
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 <footer><!--clear:both rule applied to footer-->
 . . .
 </footer>
</div>

Clearfix

The .clearfix difference is that the class is applied to the parent element containing the floats. The parent element becomes self-clearing.

An advantage of using .clearfix is that it makes the container div height equal to the tallest of the floated columns enclosed. This gives you options with borders, backgrounds and more, particularly when all of the contained elements are floated.

Using .clearfix generally will require the addition of another wrapper div to the HTML. Here’s a example similar to the one above, but designed for .clearfix. The header and footer elements are outside the wrapper div which contains the floated columns.

<div class="container">
<header>
. . .
</header>
 <div class="wrapper"><!--.clearfix class applied to wrapper-->
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 </div><!--end wrapper div-->
<footer>
. . .
</footer>
</div><!--end of container div-->

The Clearfix Rule

The CSS for a .clearfix class rule is applied to the parent element containing the floats. It uses the pseudo class :after with no content. It declares the element as display:table.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

That’s it.

WordPress Basics: Categories and Tags

When new bloggers get started on WordPress, they need to understand the basics of what Categories and Tags are. Both can help people find the content they want on your blog, but they serve slightly different purposes.

Categories are big. Broad topics that will repeat again and again on your blog. For example, web education is a topic mentioned over and over again on this blog. It should be a Category.

Under the overarching Category of web education, however, there might be many specific ideas that would be used just once, or perhaps infrequently. For example, a post about web education could be something as specific as how to write good alt text or what ARIA roles are. These very specific topics should be added to the post as tags. Tags are also helpful to search engines in figuring out what a post is about.

Depending on your theme in WordPress, the categories may become part of the menu. For example, on my blog Old Ain’t Dead, I only have 5 categories. These categories are Movies, TV series, Web series, Streaming, and News. These categories are shown as a menu. On this blog, Web Teacher, I have dozens of categories and it would not be useful to list them as menu items. The categories are, however, shown in the sidebar in a pull-down menu.

Blogs can be searched by category. For example, if you select the category blogging from the list of categories on this blog, every post in that category shows up as a search result.

Tags are also searchable, for example a search on the tag alt text. The tag alt text might be used in posts in several Categories, so the search results for a tag would include posts from all those Categories.

Choose meaningful category names. Don’t create category names that convey nothing about your content. For example, category names like “This & That” or “Misc” are not helpful to your readers or to search engines.