Category: HTML

2 Excellent (and Free) Text Editors

Since any basic text editor can write HTML, CSS, and various scripting languages, I like to let my students know which I recommend and why.

I have two favorites. Both are free. Both use color coding and indentation to make reading and troubleshooting easier. Both provide line numbering. One is for Mac and one is for Windows.

For the Mac, I like TextWrangler. TextWrangler is a “lite” version of BBEdit. Many Mac users may already own BBEdit, but if you aren’t in that position, you should get TextWranger.

For Windows, I like Notepad++.

Both these editors allow you to have multiple tabbed windows open at once a number of helpful functions for dealing with code and for general editing. I’m not sure about Notepad++, but I know that TextWrangler has FTP built in.

I consider a good text editor an essential, even if you use a tool like Dreamweaver to do most of your work. I find, for the way I work, that I often open up pages in a text editor for various chores instead of using Dreamweaver – or in addition to using Dreamweaver.

Useful links: Shadow DOM, social media & Myers Briggs, CSS examples

What the Heck is Shadow DOM? Indeed.

Here’s a fun infographic relating Myers Briggs results to the way you use social media.

Web Design Inspiration: 45 examples of CSS. I normally don’t link to stories like this, but these examples were selected by Jenn Lukas from Happy Cog and are more interesting than the usual list of this type.

Resources for the new HTML template element

In draft state at the W3C, the new <template> element is making its way into the HTML spec. The description of the document states, “This specification describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents.”

If you’ve used server side includes, or library items in Dreamweaver, or templates (not the same thing as the proposed <template> element) in Dreamweaver you understand the concept. Certain parts of a page or site with identical contents get inserted into the page using special commands or tags. The contents of those repeating elements are defined elsewhere than right on the page.

Implementation is a ways down the line, but you should be aware of what’s coming. Here’s a list of resources where you can read more about the <template> element.

As you can see from looking at this brief list of resources, the description of the proposed element and the code examples for how it will be implemented are sparse. In my opinion this is not ready for classroom instruction or implementation into web pages. But if you feel like constructing test cases you could add useful information to the topic.

Useful links: Forms in Tables, Customer Service, Female Gamers

A complicated question about making a form within a table that is accessible gets a great answer from Jared Smith at Web Standards Sherpa’s Facebook page.

You read A List Apart without me having to remind you to, right? Nevertheless, I thought this customer services post called Designing for Services Beyond the Screen was really excellent. How can you take the lessons from this article and apply them to your site?

Wow, talk about going mainstream. Ms. Magazine is getting into the fray on the topic of the miserable representation of women in gaming. Actually, About Half of Gamers are Women. It’s a good summary of the topic if you haven’t paid much attention before.

Useful Links: Academic Search, Pinterest Search, Mobile Form Labels, Online Class Retention

7 Academic Search Engines Not Named Google comes from Teach Thought.

Pinterest announced you can now search your own pins.

Mobile Form Usability: Never Use Inline Labels explains why what they call “inline labels” are are such an accessibility problem in mobile design.

Retention and Intention in Massive Open Online Courses: In Depth is a study from EDUCAUSE. It examines the retention rate in MOOCs and what that means to educators.

Useful links: alt & figcaption, screenreaders, professor blogs

Shelley Powers posted an explanation of the uses of alt, figcaption and longdesc on Google+ that is worth a read.

Screenreaders at a crossroads is from the NCSU accessibility blog. Lots of test results and comparisons of screenreaders.

The popularity behind Professor blogs today – explained is from .eduguru.

Useful Links: the future of content, Adobe web fonts, HTML Imports

Drupalcon Keynote by Karen McGrane with Video, Slides, and transcript. One of many worthwhile ideas she discusses:

I’ve gotten the reputation of being the president of the WYSIWYG Haters Club, which is true, and if you don’t buy into my rationale here today…

I’m going have to continue my graffiti crime spree. People assume I must be some kind of markdown evangelist. The problem isn’t the toolbar. Truth is, I don’t care if users make headings and bulleted lists with a toolbar or markdown codes. The problem with WYSIWYG is that we are allowing content creators to treat the web like it’s print.

Where do you think WYSIWYG came from?

It came from XEROX. Xerox PARC. Because they invented the laser printer.

How to Use Adobe Edge Web Fonts on Your Site from Design Shack is a good look at how to make the new Adobe Edge Web Fonts work for you. Both the problems and the benefits are outlined along with step by step instructions.

The W3C released the first working draft of HTML Imports. HTML Imports are a way to include and reuse HTML documents in other HTML documents.