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!

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