beghtml

Jan 062011
 

The largest paper in New Mexico has long had the most dumbfounding, confounding website anywhere. Fifteen years ago, when I started using the site as an example in classes, the oddities of the Albuquerque Journal’s websites might have been forgiven, but to this day it appears to be the work of someone who has never seen another website and who knows nothing about conventions or style. Examples can be found on every single page, but consider this portion of a form used to submit a letter to the editor.

image

I could simply sneer “1995 called and they want their form back” – this is starkly utilitarian. Why is each field so huge? Why not include NM as a default state? I know letters come from all over, but most surely come from NM. The web page creator might be forgiven for defaulting the city to Albuquerque. (That would make someone mad, I suppose.) But why, o why, dear designer, are there three phone number fields? Surely one suffices; OK, two; but three?! No doubt, the editors want the information, but it is your job to tell them it’s ridiculous.

The following example isn’t beautiful, but it is functional and more compact. It took minutes to code by hand.

image

To its credit, the form page does not have all the junk most abqjournal pages feature: a chaotic blend of menus and ads. It shows admirable restraint in that regard. On the other hand, except by clicking the Submit button, there is no link back to the website. Check out the site for yourself: www.abqjournal.com.

image

 Posted by at 9:59 am
Sep 232010
 

[originally posted Thu 09/16/10; updated 9/23/10]

IE9 is out in beta and should be out in general by the end of the year. I’ve run it a very short time. So far, I’m underwhelmed. (As I am by Google Chrome, although Chrome has been buggy for me.) I’m wed to Firefox because of the Add-ons and Greasemonkey scripts. Some of them are just too useful to give up. (Scripts, especially, because they place fewer demands on the system and they are often hackable.)

The obvious innovation in IE9 is placing the tabs to the right of the address bar – I’ve never seen that. This gives you an extra vertical line of space (as does dropping the status bar, which I prefer to see). However, that also leaves less room for legible tabs. (I’m surprised Microsoft didn’t make this Taskbar-like with icons only.)

[update 9/23/10]

Sebastian Anthony addresses one of my first concerns: the space available for tabs. On the one hand, I should have guessed this address bar is resizable. On the other hand, such hidden features vex most users. (Still, I should have tried.)

This is why you should use Internet Explorer 9

Moving on (I’ve calmed down now), the unified tab-and-address bar area, which has received a lot of flak for being too small for power-users, is resizable! You can simply make the address bar narrower, leaving more space for tabs. More space is also dedicated to tabs on wider displays: screen widths over 1280 pixels (i.e. every power-user) have two thirds of that space reserved for tabs — it’s only on smaller screens that the address bar occupies half the width (and it’s still resizable!)

This is why you should use Internet Explorer 9

[/end update]

Start with this short overview, but note some of these features are common to other browsers and there is no mention nere of what Ed Bott considers the killer feature.

Five things average users will love about Internet Explorer 9

Now that the initial hands-on reports are out and the beta download for Internet Explorer 9 is publicly available, IE loyalists (and those who simply didn’t realize there were other browsers) can finally get a taste of competitive, fast, modern browser. IE9 has a lot of great features which more savvy users know about, understand, and love — like solid HTML5, faster JavaScript engine, and hardware acceleration — but there’s also a lot for the Average Joe to love, too!

Five things average users will love about Internet Explorer 9

In the next article, the How-To-Geek does its usual thorough job with lots of screenshots, ending with a link to the beta. (Big download.)

Internet Explorer 9 Screenshot Tour: It’s Got a Completely New Interface – How-To Geek

Today Microsoft finally released the newest version of Internet Explorer, complete with hardware acceleration, web standards support, and a completely redesigned interface focused on using web sites as applications. Join us for a tour of the features in Internet Explorer 9.

Internet Explorer 9 Screenshot Tour: It’s Got a Completely New Interface – How-To Geek

Ed Bott has a very thorough consideration.

Internet Explorer 9 beta review: Microsoft reinvents the browser | ZDNet

I’ve been using the IE9 beta extensively on multiple PCs, including my primary desktop and notebook computers. Based on that experience, I have some preliminary answers to the questions you’re asking: Is it fast enough? Is it compatible enough? Is it cool enough to win back former IE users who have switched to other browsers, first to Firefox and more recently to Google Chrome? And will this shiny new browser be able to rehabilitate the tarnished Internet Explorer brand?

Internet Explorer 9 beta review: Microsoft reinvents the browser | ZDNet

Pinned taskbar icons are cool. (Not sure yet about sites – site groups, yes!) Jumplists are THE killer feature of Windows 7. (Right-click a taskbar icon or look for fly-out menus on the Start menu.) Smart jumplists improve any application, including IE9. Customizable jumplists would be great. (Yes, pinning to jumplists is great, but we could do more.)

If you decide to uninstall the beta, see Revert Back to IE 8 from Internet Explorer 9 Beta – How-To Geek

 Posted by at 12:05 pm
Sep 192010
 

Welcome to class. Please feel comfortable asking questions and participating in discussions. mjh

Note the following addresses:

My computer blog: www.mjhinton.com/help/
My email: mark@mjhinton.com
Continuing Education contact: Caroline Orcutt at 277-6037, orcutt@unm.edu

Please check this blog after the course is over.

UNMCE course description:

Enhance your ability to control the looks and functionality of your Web pages by learning HTML and XHTML, the closely related languages that programs such as Dreamweaver and Expression Web use behind the scenes. Use code to add graphics, links, and tables to your pages, and explore the power of CSS to format text consistently and quickly. Gain an understanding of the similarities and differences between HTML and XHTML, and practice using FTP to upload your pages to a live Web server.

Prerequisites: 52008 or 54101/11 or equivalent experience, and Internet experience.
Note: This course is Windows only. [mjh: But it should help Mac users, if they are comfortable with Windows.]

Announcements before class begins

Class website: www.mjhinton.com/beghtml/

Class Files to download:

 Posted by at 2:06 pm
Mar 252010
 

You will use some FTP (File Transfer Protocol) program if you upload webpages from your computer to a website server. FireFTP is as good as most and convenient as an Add-on to Firefox.

FireFTP :: Add-ons for Firefox

FireFTP 1.0.7

by Mime Cuvalo

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

All Add-ons for Firefox

FireFTP :: Add-ons for Firefox

 Posted by at 10:24 am
Dec 222008
 

 

HTML 5 aims to improve HTML’s interoperability and address the growing demand for more diverse and complex web content. It also addresses HTML 4′s lacking features for web applications. In this post, we’ll look at 5 exciting new features in HTML 5. This is a guest post by Jacob Gube, a web developer/designer and author of Six Revisions, a blog on web development and design.

5 Exciting Things to Look Forward to in HTML 5 – ReadWriteWeb

 Posted by at 10:38 pm
Nov 132008
 

Abstract

This document illustrates how to write HTML 5 documents, focusing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

HTML5 Elements

HTML 4.01 / XHTML 1.0 Reference

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.

Selectutorial: CSS selectors

 Posted by at 10:37 pm