What You Must Know About Writing on the Web

Posted on by
9

1975.

While that number might mean different things to you, like your birthday, an anniversary, graduation year, part of a lottery number – to me it represents a quota.

Several years ago, a fan counted up all the articles I wrote every year and came up with an estimate of 1,975 articles published annually across multiple sites.

I was stunned. No, staggered. I now had a number. I didn’t know what to do with it. It freaked me out. That’s 164 articles a month. Thirty-eight articles a week. Five and a half a day. That’s a lot.

Don’t even ask to add up the word count. I couldn’t. Yet, the same person estimated that I wrote 2,370,000 words annually.

It took a long time for me to come to grips with that number. I worried when I became smarter with my time and dropped some of the online columns and magazines to concentrate on more influential sites. What if I couldn’t keep up with the numbers?

After a while I gave up and realized it was just a number. Like a random phone number or birth date. Another number not to worry about. Much.

Along the way to generating all those words every year for many years on end, I learned a few things worth sharing. Continue reading →

What is the Difference Between a Website and a Blog

Posted on by
2

Colorful text says blog versus website.We live in a world of ever changing terms and jargon. Let’s see if this will add to the confusion or clear things up when it comes to what to call a blog and what to call a website.

A website, or site, is a collection of web pages.

A site is designated by its domain name, the part of the address or URL that defines the site such as WordPress.com, WordPress.org, or lorelle.wordpress.com.

A web page is any page on the web, usually found within a website.

A web page’s address is an extension of the domain name such as example.com/article-title.

A blog is a site with content displayed in reverse chronological order.

These are the facts. A site can be a blog and a blog is a site. Continue reading →

Web Design: Tools, Color Wheels, Charts, Theories, and More on Color

Posted on by
2

Colored ball in a quilt of colors.Most business owners don’t consider the importance of color when thinking about promoting their business. They just want the colors to match their business cards or logo.

When it comes to choosing colors for your website, it can be as easy as planning the colors to paint the rooms in your house. It begins with some color theory, then pull out your old color wheel and give it a spin. Right?

Well, it would if colors on the web were that easy.

In order to understand how colors work in web design, you need to know some important concepts.

I’ve put together this summary of resources to support these and included many online free tools, color charts, color wheels, and more to help you learn more about how web colors work and how to choose colors for your web design or WordPress Theme.
Continue reading →

Web Page Annotation and Markup on Live Web Pages

Posted on by
Reply

Teaching web publishing with HTML, CSS, WordPress, etc., and working with clients, I long for the ability to just look at a web page or PDF and draw on it. Point out what works, what doesn’t, editing notes, and somehow share it or preserve it. Or make notes. To scribble a note that says “I need to remember this” or “this is cool!”

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

Layers is a tool that allows you to have a conversation on a web page with annotations and image shows the conversation and graphics.In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

How to Choose a WordPress Theme

Posted on by
Reply

When it comes to choosing the right WordPress Theme, there is a right way and a wrong way. And both may be right for you.

First, let’s look at what people look for and what influences them in the decision process with a WordPress Theme, and the myths of their reasoning.

Comparing the same 2011 WordPress Theme - the light and the dark version - totally different.

The default WordPress 2011 Theme has two versions, dark and light. By changing the background image, these two sites on the same Theme are completely different.

How much does it cost?

First of all, the majority of WordPress Themes in the WordPress Theme Directory are free. Before you start investing in a WordPress Theme, stick with free Themes so you can test drive them.

If you fall in love with one and lack the web design experience or time to modify it, contact the author and hire them to fix this to your liking.

A paid or premium WordPress Theme is no better or worse than a free Theme. Don’t believe the hype. You are usually paying for support or additional features you may or may not need. Price does not dictate quality. Continue reading →

How to Schedule Your Posts in WordPress

Posted on by
2

Example of the Publish Immediate, future or schedule post feature of WordPress.To schedule a post or Page to publish at a time before or after this moment, you may use the Schedule feature in WordPress.

  1. Edit or Add New post or Page.
  2. In the Publish panel of the screen, go to Publish immediately.
  3. Click Edit.
  4. Set the Month, Day, Year, and Time.
  5. Click OK.

WordPress Schedule future post feature allows you to set the date and time the post or Page will publish.If the post or Page is a draft, the Publish button will change to read Schedule.

If the post or Page was published, it will say Update.

Click this when you are ready to update or publish the post or Page. Continue reading →

WordPress PDX Meetup October 29, 2012

Posted on by
Reply

The next Portland WordPress Meetup is October 29, 6:30PM, at the US Bancorps Bldg. in downtown Portland. Aaron Hockley, noted photographer and WordPress expert will be covering “Supercharge Your WordPress.”

Aaron spoke at my last WordPress class at Clark College and is the founder of WordCamp Portland (PDX), an annual WordPress event in Portland.

I highly recommend attendance.

For those already familiar with the code, WordPress Themes, and Plugins, a second meeting will be Tuesday, October 16 at 6:30PM at the US Bancorps Bldg, and be focused totally on the code and developer issues. See Peer Code Review for more details.

WordPress Introduction Course at Clark College Continuing Education October 16, 2012

Posted on by
Reply

Starting October 16, 2012, I’m presenting the Introduction to WordPress at Clark College Corporate and Continuing Education in Vancouver, Washington.

The CTEC 280 Clark College WordPress Introduction course continues as a four credit course. This is the college level course for WordPress users wanting to learn how WordPress works and how to use it better for half the price and no degree credits or college registration required.

REGISTER:
Clark College Corporate and Continuing Education
The Introduction to WordPress
6-8PM October 16 – December 6
Columbia Tech Center in Vancouver, Washington
$299 Item # F257
Register: Online or call (360) 992-2939

The Clark College Corporate and Continuing Education program, The Introduction to WordPress, is a slightly scaled down version of the full credit course. It is a thirty hour course designed for anyone looking to learn how to use WordPress for a personal or business website. It covers the basics on how to use the WordPress platform including installation, content management, configuration, SEO, and user experience strategies. The course also covers more advanced areas including WordPress Themes, Plugins, and advanced settings. No prerequisites are required, though familiarity with web browsers and web pages in general is highly recommended.

The Clark College CTEC 280 WordPress Introduction course will be offered Winter Quarter. If you are interested in the course as part of a degree or business education course, contact Reesa McAllister, CTEC offices, at 360-992-2456 to learn how to register and/or get on the waiting list for the class announcement.

What is a Website Call to Action?

Posted on by
2

Call to action button called click me with quote that says go on, you know you want to.What is a “call to action” on a site?

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.
Call to Action Buttons: Examples and Best Practices by Smashing Magazine

It is literally a visual hint (or shout) that encourages a user to click or take some form of action.

Calls to action are used to:
Continue reading →

Public Domain, Free Photography and Images for Your Blog

Posted on by
4

Originally published on Lorelle on WordPress and used here with permission. This list is for my classes and workshops needing public domain, royalty free images for their projects.

Colorful brain scan of a mouse - US Science Departments, public domain photographs

Colorful brain scan of a mouse.

I’ve been collecting a variety of resources for free photographs to use on your website and blog. These images are, for the most part, free to use, but may have copyright and usage restrictions. Some may require registration, use only on non-commercial sites, and/or a link back to the source. Others may require more. Check thoroughly for the specific usage rights before using any of these images.

Just because you select a filter for public domain and royalty free images on a Google Image search does not mean these images are actually public domain and royalty free. Check. Ask first, they might say yes.

is a major resource for images, but many of these have restricted use. Not every image on Flickr or the web is free to use. Check thoroughly for usage rights, and if in doubt, get permission or don’t use the image. Check out Flickr’s Public Domain Photos’ Photostream for images specifically marked as public domain.

Autumn Leaves - Morgue Files - public domain free photographs.The images featured range from people, places, wildlife, and space, as well as textures, patterns, and artistic graphic images. These free photos sites listed may have nude or violent images, though I did my best to exclude image sites which specialize in those.

One of the best, kept up-to-date lists for images and graphics in the public domain for free use is Wikipedia:Public domain image resources. I usually start my search from their list, which includes government collections and resources, special subject-based collections, and more.

Continue reading →

The Basic Structure of a Blog Post

Posted on by
2

There are many ways to present a post or article on a web page. This tutorial will cover the basic formatting, styles, and structure.

Every WordPress Theme handles the basic elements in a post different, making the headings stand out in a variety of ways, adding borders around images or not, adding design elements to a blockquote…the list is long. I recommend that you test your own WordPress Theme by writing a test post following the examples in this article, or you may use the Sandbox Post for Testing WordPress Themes. It is a text file with HTML code representative of all the HTML tags found in a blog post.

Formatting the Post in WordPress

Before we begin, I will be making references to the formatting toolbar found on the post and Page Edit Screens. It is blow the post title area and directly above the content textarea where you will write your post.

The WordPress Visual Editor Toolbar featuring the Kitchen Sink Button which expands to feature a second row.

By default, you see only one line of buttons in the Visual Editor. The last button on the row is called the Kitchen Sink. If you click it, a second row will drop down. Continue reading →

How to Create Seamless Background or Tiled Patterns

Posted on by
Reply

One of the ongoing challenges web designers have is with background images. Background images are found within the background of a web page, specific DIVs, menus and navigation, sidebars, all over the place.

Example seamless pattern background image for tiles and tiling on web pages. Source - fractured-sanity.org.

A well designed pattern or texture that is seamless and tiles well is one that repeats gracefully in the background, complementing the purpose of the site and not distracting. A non-distracting background is one that is literally seamless, no distinction between the edges of the graphic. It doesn’t look like a bunch of repeating blocks. It is one smooth, evenly repeating pattern that is flexible, stretching into the background no matter what the width or length of the web page.

The process involves developing graphics that, when tiled together, appear as one single image, or a gentle repeating pattern. This is often done by selecting simple graphics and blurring the edge or positioning the elements to they bookend to each other, repeating the pattern over and over again.
Continue reading →

Most Common Database and Programming Errors

Posted on by
Reply

WordPress, web database, and web designers need to pay close attention to these two articles from TechRepublic: “Five common programming mistakes” and “Five common database development mistakes.”

The first one deals with the most common programming mistakes, a few I’ve done myself. UI craziness and variable naming inconsistencies will often eat up my time as I resolve their issues.

The second article on database development mistakes addresses many of the issues I and others have with dealing with other people’s work. A missing mistake that should be on the list is a lack of inline documentation, the notes a developer should leave to not only remind them of what happened here and why choices were made, but informs future fixers of what is going on. Without these, we have to read the code like a book, and not everyone writes based upon readable standards. We spend too much time playing detective for the simplest of fixes.

A comment in the first article really caught my eye and sums up so much of what causes problems with the code.

This isn’t the tool’s fault — the error is between the keyboard and the chair. On the one hand, it speaks volumes about the quality of these tools that I trust them so much that I lost a lot of my vigilance; on the other hand, it is still my fault that I allow convenience to turn my brain off entirely. I have learned to slow myself down when using code completion and take the extra second or two to ensure that I have made the right choice.

The biggest problem is what is sitting in the chair – remember that next time you start blaming.

WordPress Links and Blogroll Feature Gone in WordPress 3.5

Posted on by
2

With the release of WordPress 3.5 soon, expect to see the WordPress Links feature, also known as the Blogroll, gone.

I’ve written more about this in “Blogrolls Gone in WordPress. How to Save Your Links” on .

The article includes an explanation of why as well as tips and techniques for exporting and saving your WordPress links, and how to display them in new ways within WordPress.

Tutorial: Tools for Evaluating and Testing Web Pages

Posted on by
Reply

There are many online tools, web browser extensions, and add-ons to help you evaluate and test web pages. We will be talking about web page validation later, but you can use these tools now to become familiar with such tools and how to integrate them into your web browser.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

Continue reading →

Tutorial: How to Inspect, Edit, and Save a Web Page

Posted on by
Reply

This tutorial from the HTML Fundamentals Class I taught at Clark College in Vancouver, Washington, is a guide that will show you how to:

  • View the source code of a web page.
  • How to save a web page to your computer
  • How to view a saved web page on your computer
  • How to open a web page in your text editor
  • How to view the CSS/Stylesheet for a web page
  • How to inspect the HTML and CSS of a web page
  • How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

  1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
  2. Right click on an empty space on the web page and choose View Page Source or View Source.
  3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
  4. You may save this to your hard drive or go back and save the entire web page to your computer.

Continue reading →

Links and the Anchor HTML Tag

Posted on by
2

This is a tutorial from the HTML Fundamentals Class I taught at Clark College in Summer 2012. It applies to HTML and WordPress.

There are five basic forms of links on a web page.

  1. External Links
  2. Internal Links
  3. Jump Links
  4. Image/Multimedia Links
  5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>
  1. a: The HTML Anchor tag.
  2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
  3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
  4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

Continue reading →

Truly Beautiful HTML Cheat Sheet

Posted on by
Reply

Chris Coyier of CSS-Tricks is one of the brilliant minds ripping and tearing web design apart and putting it back together so we understand it even better than before.

In “What Beautiful HTML Code Looks Like,” Chris shares a beautiful cheat sheet for what beautiful HTML really does look like.

Chris Coyier - CSS Tricks Cheet Sheet on creating beautiful HTML

It includes HTML5, JavaScript references, and everything you need to know to make beautiful music with your web page code.

Lorem Ipsum: Resources for Dummy Content

Posted on by
3

The traditional Lorem Ipsum site front page.The granddaddy of all Lorem Ipsum services is Lorem Ipsum – Lipsum generator. Lorem ipsum has been used for hundreds of years to generate dummy content for prototypes, wireframes, and galleys. Created originally for print material, it has evolved online beyond the original Latin to a variety of forms, formats, and “languages” for web use.

Selection of Lorem Ipsum types can be tricky. If you are working on a project for fun, you can use anything that tickles your fancy. If you are building a wireframe or prototype for a client, while Lorem Ipsum might be appropriate and professional, choosing dummy content that matches the intent and purpose of the site might be wiser, such as using the Cupcake Ipsum for a food site, a Lorem Ipsum alternative that features names of deserts with Latin, Pasta Ipsum – for all your macaroni product lorem ipsum needs for pasta lovers, or Veggie Ipsum – the vegetarian lorem ipsum generator for an organic restaurant or farmers market seller.

Mustard salsify welsh onion cucumber earthnut pea okra brussels sprout. Yarrow green bean gumbo garlic welsh onion wakame pumpkin wattle seed yarrow sierra leone bologi taro gram. Catsear amaranth celery wattle seed sorrel shallot pumpkin.

Onion wattle seed quandong parsley fava bean rutabaga courgette cucumber. Celery potato melon bok choy epazote zucchini artichoke fava bean beetroot groundnut desert raisin onion black-eyed pea jícama coriander celery. Lotus root spring onion endive arugula tomatillo sorrel pea dulse chickweed turnip gourd plantain cauliflower tatsoi bush tomato komatsuna rutabaga. Water chestnut endive pea sprouts gram lentil spinach chicory lettuce soybean melon turnip greens celery parsnip artichoke okra swiss chard eggplant aubergine. Water spinach garlic tomatillo tigernut catsear peanut amaranth melon garlic.

Consider Bacon Ipsum for carnivores or Cheese Ipsum for cheese lovers.

Cheese slices lancashire jarlsberg. Monterey jack fromage say cheese pepper jack fondue cheese strings blue castello cheese triangles. Cheesecake squirty cheese cheesecake fromage frais mascarpone cheese and wine edam cheesecake. Stinking bishop stinking bishop.

Manchego rubber cheese cheesy grin. Fromage frais port-salut camembert de normandie port-salut port-salut manchego camembert de normandie cheese triangles. Bocconcini bocconcini cheesy feet cheese triangles macaroni cheese cheese slices paneer cut the cheese. Edam.

Cheese on toast who moved my cheese the big cheese. Queso cheddar pecorino fromage frais parmesan mozzarella brie lancashire. Jarlsberg smelly cheese lancashire cheddar stinking bishop roquefort port-salut cheesecake. Cheese and wine fondue blue castello smelly cheese emmental pecorino parmesan.

For serious sites and clients, the traditional Lorem Ipsum is a wise choice, but like the food versions of Lorem Ipsum, there are more content specific alternatives such as Corporate Ipsum for corporate speak, and Not Lorem Ipsum for industry based Lorem Ipsum generator. These create dummy content based upon the specific industry of the company such as app development, advertising, banking, cafes, restaurants, accounting, car sales, dentists, and more.

Check out this dentist version of Lorem Ipsum.

We are a friendly team of dentists, hygienists and receptionists who work together to ensure that you receive the best treatment that you require at a time that suits you. All of our dentists are accredited by The British Dental Association Good Practice Scheme, so you can rest assured that your smile really is in good hands.

We offer NHS dental treatment to children and have a very easy private payment scheme for our adult patients. We encourage everyone to visit the dentist regularly so that we can prevent any problems from occurring and the more you visit the less likely it is that we will have to do anything “scary!”

If you are working on a static HTML site, <html>ipsum is Lorem Ipsum set within HTML tags for paragraphs, lists, forms, tables, and more. Several alternative Lorem Ipsum generators offer the option for HTML including One-Click Lorem Ipsum Generator and Loripsum.net.

Web 2.0 Ipsumr is a popular alternative Lorem Ipsum generator using nonsensical Web 2.0 startup names in keeping with the naming of things like Google, Woopra, Orkut, Zynga, Squidoo, Meebo, etc. Hipster Ipsum is for the younger generation with lines such as:

Sriracha tofu ethical, cardigan wayfarers bushwick butcher kale chips scenester mcsweeney’s sustainable jean shorts Austin. Gastropub VHS farm-to-table, lomo whatever authentic thundercats street art. Iphone gentrify pour-over street art, small batch food truck keffiyeh DIY american apparel artisan high life cray twee fingerstache. Forage mumblecore readymade next level, single-origin coffee keytar swag cliche mcsweeney’s american apparel squid chambray. Occupy vice whatever forage, brooklyn next level direct trade messenger bag pitchfork.

Why stop with clever nonsense Web 2.0 names. Use Twipsum to generate your own Twitterverse originals in Lorem Ipsum fashion.

Continue reading →