Web Page Annotation and Markup on Live Web Pages

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

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 Create Seamless Background or Tiled Patterns

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

Tutorial: Tools for Evaluating and Testing Web Pages

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

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

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

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.

Cleaning Up Your HTML and CSS Code

Dirty Markup interface for cleaning html, css, and javascriptTeaching HTML Fundamentals at Clark College in Summer Quarter 2012 was a step back into history and a good learning lesson for me about teaching but also about HTML.

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”
Continue reading

HTML and CSS Resourses List

The following was compiled specifically for the Clark College HTML Fundamentals Class but can be useful to WordPress and web design in general.

The following are helpful HTML and CSS references and resources.

W3C Guidelines and Standards

Basic HTML and CSS Resources and References

Continue reading

HTML and CSS Basics Tutorial [Video]

The following video is for Clark College’s HTML Fundamentals Class and covers the basics of HTML and CSS you need to know for building and fixing web pages. It also applies to understanding the underlying architecture for WordPress Themes.

CTEC 122 HTML and CSS Basics You Need to Know from Lorelle VanFossen on Vimeo. Continue reading