WWW posts page 39

TMCom: Now Real XHTML 5

in

As mentioned in a previous post, my site has gone to the HTML 5 doctype. I had come from XHTML 1.0 and wanted to continue with the XML syntax of HTML 5, but my site wouldn’t validate with the XML declaration. I recently remembered that I had been serving my site with the mime-type “text/html”, which is allowed in XHTML 1.0 transitional. HTML 5 got stricter, and if you want to use the XML syntax, it must be served as “application/xhtml+xml” or “application/xml”.

So I modified the doctype switcher I had made (mentioned in that previous post) to change the mime-type to “application/xhtml+xml” when the configuration doctype was set to “xhtml5”. But IE evidently cannot handle that mime-type, so I set up my switcher to output as “html5” for IE, but “xhtml5” for other browsers. I reset the doctype variable (now an attribute of a page object):

if($this->doctype == 'xhtml5' && strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE'))
    $this->doctype = 'html5';
Continue reading post "TMCom: Now Real XHTML 5"

Samba: Mockups in HTML

in

In building a website for a client, one usually builds clients, one usually builds a few mockups with different themes to give the client an idea of what the site will look like with one of a few options. They can tell the designer what changes they want, which can be made relatively easily to the mockup before the theme is actually built for the site.

The mockups are supposed to be quick and easy to build and modify, allowing designers to avoid dealing with all of the nuances of CSS and HTML at this early stage. Designers shouldn’t be held to any limits at this point: They design what they think the site should look like, and figure out how to build it later.

Traditionally, this might have been done in Photoshop. The layout would later be cut up and positioned on the site with CSS. I did three mockups for the Stearns Homestead project in Photoshop. They were a pain, with maybe a hundred layers to handle two pages of the site for each mockup. Managing multiple elements of the same type is not easy there. Photoshop doesn’t allow any easy management of multiple blocks of typography at once, so changes are difficult. Now that I’m not using school computers, I don’t have access to a newer version of Photoshop, and none of my image editors have layer folders or some other useful features, which had helped me out a lot.

Continue reading post "Samba: Mockups in HTML"

Lynda: Web Accessibility Principles

in

I’ve completed another Lynda course, Web Accessibility Principles by Zoe Gillenwater. This course was well put together, had a lot of good information, and should be very usable, though it perhaps had a lot of repetition (to give a feeling of what screen-readers must go through?) and pacing issues. It also, perhaps due to its age (from late 2007), missed some techniques, such as pure CSS drop-down menus.

As I watched it, in addition to taking copious notes, I stopped from time to time to implement some of the practices on my own site(s). For instance, I added a class for content that will benefit screen-readers but not be that useful to or possibly bother regular sighted visitors:

.screenreaderOnly{ position: absolute; margin-left: -9000px; }

I had been using “display:none;”, but evidently screen-readers hide that content as well. I added some screenreaderOnly headers in my navigation and footer since screen-readers provide easy navigation by header. I also created a skipToNav link (my nav is below my content) using the hiding technique above, but also used “:focus” and “:active” (for IE6) to allow keyboard users to access it:

<div id="skipToNav"><a href="#navigation">Jump to navigation</a></div>

and:

#skipToNav{ z-index: 3; position: absolute; top: -20px; left: 60px; }
#skipToNav a{ position: absolute; left: -9000px; }
#skipToNav a:focus, #skipToNav a:active{ position: relative; left: 0; }

I also added a few Firefox Extensions for accessibility purposes. Fangs writes out pages as text similarly to how they’d be read be a screen-reader. I had been using Lynx to see my pages rendered text-only, but hadn’t realized how much other stuff gets read out. Colour Contrast Analyzer and WCAG Contrast Checker both allow checking of page color contrast of individual page elements to make sure visually impaired folk can read text. They do things slightly differently, and both seem to show background-foreground pairings that don’t exist on the page.

I’ve done some other stuff to improve my sites accessibility, but plan to do more when I have free time. I will go through those accessibility checkers and attempt to move as close as I can to being compliant with them. As I start to implement this stuff on my own site, I will be able to more easily implement it on other sites I build as well. This will hopefully be helpful in getting a job as well.

TMCom Goes HTML 5 (Doctype anyway)

in

I’ve finally joined the bandwagon and moved my site to the HTML 5 doctype. It is much simpler than previous doctypes:

<!DOCTYPE html>

breaking away from the SGML standard of including a reference to the DTD for that doctype. I’m not sure how this will play out as HTML moves beyond 5, but I’m sure it won’t be a problem for a while anyway. And hopefully with all this time they are taking to finalize the specifications, we won’t have problems with backward compatibility, future expansion, validation of old documents, etc.

Anyway, I had considered using the doctype a while back but abandoned it for reasons I don’t remember. The “role” attribute, which I first noticed in WordPress themes, is what got me to consider HTML 5 again. It offers potential accessibility benefits to user agents that know about it by specifying what an elements “role” is in relation to its document: navigation, banner, main, contentinfo, etc. HTML 5 offers elements with similar meanings, but they are not supported well. The attribute is not valid in XHTML 1 (it was proposed for XHTML 2, which never came about), and my attempts at an alternative doctype failed.

Continue reading post "TMCom Goes HTML 5 (Doctype anyway)"

WordPress: Comment Approval Email Address

in

[Update 6/11/2009] See comments for resolution of this issue.[/update]

Had a weird problem that might point to a weird semi-bug of WordPress.

I just recently received an email asking me to approve a comment on the Stearns site. I haven’t touched the admin part of the site in two months. We had set them up to need to approve every comment, and to have WordPress email the administrator whenever a comment was submitted. When I left I had made sure the address in the >Settings>General pane was set to one of the Stearns people, and it still is. This is the address I thought would receive the comment approval mailings.

I went looking for information on where the address for comment approval mailings is pulled from. According to this thread, the mailings are sent to the address of the “admin” account. I had deleted the “admin” account for security purposes (getting rid of a known user name) and may have transferred that account’s posts to mine. Or maybe it’s because my ID is the next closest to zero. So my account may be considered the “admin” account now.

The other possibility that I thought of is that the mailings get sent to the post author. I’m set as the author of the post the test comment was set to and a number of others. I would have to change them all over to one of the Stearns people if this were the case.

Choosing the easier solution first, I changed the email address of my account to that of one of the Stearns people (modified with the “+” syntax to avoid duplication). I did a test comment on the same post as the previous one was sent to and did not receive an email, so the suspicion of that thread may be correct (have to verify with the Stearns people).

I think that is a silly place to pull the address from if true. It would certainly make sense to have this settable and not tied to one particular account. The comment moderator might not necessarily be the “admin” user, as with Stearns. It doesn’t seem to be unreasonable to have the comment approval mailings sent to the same person who receives mailings about user registrations (the one on the “General” tab). Or, to be a bit more fancy, either have a separate address or user set for comment moderation on the >Settings>Discussions pane.

I’ll update this post if I find out more.

[Update: 6/10/2010] At this point I am thinking that the author of the post receives the comment approval emails, as it would certainly make the most sense. For the Samba Soccer Club site I did a while back, I received a comment approval message for a post I wrote as myself rather than admin. I do have the lowest current ID, so that can’t be ruled out, but it really doesn’t make any sense for that to be how it works. I’ve realized that my changes on Stearns shouldn’t tell anything, because the lowest user id and post author are both the same for the relevant posts.[/update]

The Case for DOM Element Insertion With CSS

in

CSS provides the “content” property for inserting content into documents, usually before or after elements. This can be bad if the content inserted is not strictly for presentational purposes, but when it is, it can be a very useful tool for changing a sites appearance with only CSS.

The property can be used to insert strings, images, even counters. Unfortunately, DOM elements cannot be inserted. Why would you want to insert DOM elements? Doesn’t that go against the separation of content and presentation even further than the “content” property already allowed?

Ideally, in marking up a document, one should not need to consider presentation at all, only the proper elements to stick a given block of content into. The CSS would be created separately and form those elements into any appearance desired. There are a lot of reasons this can’t currently be done, including sort order and hierarchy. Another is the limit of what is available to be styled in the HTML document.

Continue reading post "The Case for DOM Element Insertion With CSS"

Officially Done With School

in

Finally, after two months, I’ve got real word from Tri-C about my graduation. They sent me a congratulation letter and transcript. The letter verifies that I have completed my degree. It also explains that, indeed, they have just one ceremony in May. I will not receive my actual diploma until June, but I’ve got this letter until then. The transcript finally tells me my GPA, which is 3.93. I had been listing it as 3.8, the last verified number I had.

What can I do with my two degrees? Hopefully something that involves monetary compensation. Hopefully at least as much as I made as a line cook.

Canine: WordPress Custom Searches

in

The WordPress search by default looks through the title and content of all available posts and pages for given query words. But sometimes you might want to only search a certain category or search custom fields or some other criteria. On the Canine Lifeline site, we have a dog section where we want to be able to list dogs based on a number of parameters, such as age, gender, adoption status, et cetera. We are currently storing dogs as posts in a particular category, and using Magic Fields to add custom fields for various aspects of each dog.

WordPress sends search queries as GET requests from its search form. The “s” variable contains the search query, but others are allowed. In fact, if you’re familiar with the “query_posts” function, many of the parameters for that are available, and the rest can be enabled, because the search is basically just a regular WordPress query with parameters appended from the GET variables.

Continue reading post "Canine: WordPress Custom Searches"

Samba: Another Freelance Project

in

Yay! I’ve got another freelance project now, and this one I’ll actually get paid for. It won’t be much pay, I gave them a very low price, but it sounds like I will get paid more from this job in the future: They want me to be their go-to guy for updating the site and new features. They will probably have me do things like update dates and add images, so it may be like an hour a month or something, not a lot, but something.

So finally, the project is for Samba Soccer Club, a small Cleveland youth soccer club. I got the lead from Ronda Leffel, the coordinator of the eBusiness program I was in at Tri-C. I met with them Saturday at Baker’s Square to talk the project over.

They had a site at one point, but let that lapse, and now want a completely new site, from scratch. They still have the URL, so they will just have to get a host and transfer it, or however that works (I’ve never done it yet). I’m going to have to do a bit of research on hosts for them, but I might suggest they just let me manage their site on my hosting account. I’ve not done this before, but it sounds like Dreamhost‘s version of reselling is just letting us create users for our clients and bill them ourselves. They shouldn’t have too much traffic, so this should work fine.

Continue reading post "Samba: Another Freelance Project"

Lynda.com: Building an Online Shopping Cart

in

I’ve completed another Lynda.com certificate, my first since starting my solo lynda account. This one was titled Building an Online Shopping Cart. I don’t really have experience with eCommerce yet. I worked with the forms and some of the database information at my RPM internship, but the actual processing was already built and out of site, and all I was doing was modifications to something that existed.

The course had a fair amount of good information for doing eCommerce. It did kinda focus on Cartweaver a lot, which is unfortunate considering that I don’t do Coldfusion and don’t really have a desire to. The basic concepts of that could be applied to any shopping cart application though. It also didn’t go into enough detail for me about the specifics of working with gateways/processors or, to a lesser extent, SSL certificate companies. I will definitely have to actually do one to truly understand how to do it and what options there are.

Anyway, I think knowing this could easily help in getting a job or maybe a freelance project. Then I’d get some actual experience which will really help getting more.