Make things a little more accessible

Key on keyboard
I was asked to redesign a site not too long ago and I’m pretty pumped about. Not going to lie. What I do like is that the site already has plenty of content to work with. The trick will be creating a good user experience for the person I will be handing off the site to.

The current state is blank since I’ve not really had much time to work. Personal matters. I do have a site design in mind but still need to sort out a few things here and there. I think the downside is that he wants the site to be finished as soon as possible. This may present a bit of an issue.

I can quickly get the ball rolling for him but the trick will be creating his theme and I may even have to experiment with a few plugin options to better enhance both his experience as well as user experience.

With that in mind when it comes to the actual coding of the site will be a feat as well. The reason is because I want to be that change. I want the web to excel and in a good direction. How will I achieve this? By making the site accessible. What do I mean by that? By using ARIA roles in my markup.

Yeah it does seem a little odd to be using those but it will all make sense. It’s just one step to creating a better web experience for everyone.

How will I use it?

The way I will go about this is by using

role=*

to make things a little more accessible. There are several roles in a document but they must be used properly. You can’t just go berserk and start giving everything a role just because you think it has to have one. In an HTML document there are some that really need them. HTML5 does play nicely with several of these.

The reason for wanting to use this is so people that aren’t able to view the site traditionally don’t miss out on certain things.

Let’s look at a decent example of this.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


    
    Document Title


    

As you can see with HTML4 some of the information can seem a little repetitive. Now, when we change to HTML5 and use some ARIA roles it makes a little more sense.

< !doctype html>


    
    Document Title


As you can see the document makes a little more sense. You can tell what the role is of each element. I think that is one of the main reasons I have come to love using HTML5 markup. The ability to use elements like

main

,

aside

,

header

, and

footer

are a great addition and make for much easier organization of information.

The key will be reading the documentation for the roles and definitions of those roles. This will be fun!

Learning with practice

The progress of my theme is decent. I have been learning how to work with Git and SVN more and more. I did recently have a little conversation with @ipstenu on Twitter about learning version control. Yes, I am still learning how to harness the power of simple commits and getting the hang of how to use branches and tags.

Which brought me to my main point: tutorials.

People on the web have dozens and dozens of them. Some are better than others and some are just beyond outdated. I was looking for a tutorial on how version control works using SVN. You would think I would find at least five. No. I found links talking about how SVN works but no real tutorial.

@ipstenu asked me if I could find one noob friendly tutorial. Of course I couldn’t. True, there wasn’t one. Yet. I have been contemplating creating a simple tutorial on how to use TortoiseSVN in a local setup. Sounds simple, right? Yes and no. The writing is a simple thing but taking all those screenshots to go with that will be a task in itself. I know I’m capable of it I just now have to find the time. Keeping in mind that even my current knowledge is not that great but it should suffice for the time being.

One of the first things that I learned was ‘commit’ so of course that will be the first topic. Next in line is ‘branches’ and ‘tags. and how they work. That is one thing I still haven’t yet mastered through a GUI. Just takes me back to when I was in Junior High and learning about computers but that is another story.

Yes, tutorials have helped me understand certain things but often times I don’t really learn unless I put forth the effort. Learning by practice is a great method and a great way for me and others to learn as well. I just hope that I can get my tutorial written out so that people understand. Although this has given me an idea for a future post: translation.

HTML validation issues

If it’s one thing I hate it’s loading up a site, click on something and then the layout gets all wonky on me. For the last two years I have read and learned about HTML and CSS validation. The one thing I have learned is that there are people out there that don’t care for it.

What I have learned from reading tutorials, forums and glanced from other (what I consider professionals) developers is that validation is key. I, too, agree that it should be good practice. Better yet: natural. The one issue I have run into as of lately is that WordPress will output an empty element and you get an error in validation. The other thing I noticed is that often times an image doesn’t always get a “alt” attribute. Yes, this can be remedied by making one in the media editing section but what happens when a user doesn’t put one in?

I think that by default WordPress should at least create a sort of container or filler for those rare scenarios. A good example is the gallery shortcode and the captions it creates; or rather it doesn’t. When there is no caption for the image it will still output that element but will be empty. Bad. Rather than creating an empty element just don’t output it. Again: bad.

So, rather than nothing do something. It’s what I kind of did with a quick solution.

$caption = wptexturize( $image->post_excerpt );
 if ( !empty($caption) ) {
 $output .= "tt< {$captiontag} class='wp-caption-text gallery-caption'>" . $caption . "n";
 } else {
 $caption = "No caption entered";
 $output .= "tt< {$captiontag} class='no-caption'>" . $caption . "n";
 }

It works for my needs and what is really nice is that if I forget to put a caption on an image for my gallery posts it will say: No caption entered.

Now I just have to work on REGEX to remove unwanted attributes. The journey continues! 🙂

One more week

Earlier today when I got home from work I did my usual routine of updating to the most current development version of WordPress, made sure all other applications were up to date and opened up my code editor (Notepad++) to view and edit my theme files. Since I was wide awake I tried my hand at experimenting with Git and TortoiseGit on my main computer. One thing leads to another and I managed to delete my theme. I hadn’t made the last commit of adding my modified gallery shortcode.

Needless to say I am kicking myself pretty hard. What this means now is that I am starting over with a new repo but still with SVN and not Git. Git will be for my next project theme. The reason I am starting over is because I deleted the working copy and didn’t realize that I hadn’t added all the files and hadn’t made all the commits I needed to be in sync.

In about one week WordPress 3.5 will be launching and I am pretty stoked about it. The reason is because the way media is uploaded has improved. I feel this is a huge step in the right direction for WordPress development and adoption. People want to be able to share not only their stories but some want to share photos, videos and sometimes audio. The uploader is fairly easy to use and the user interface is elegantly designed.

But enough drooling about what is to come more about what I was trying to get across: patience. I have plenty of it and sometimes I feel I have too much of it. In one week I will make an attempt to rebuild all the code I lost and have it all finished by the time 3.5 launches. This should be manageable since I know what files I need this time after having tested file hierarchy with my previously deleted theme.

Today I created all the empty files and committed that to the repository so I can code away and make the final commits when I am satisfied with the code; that way I won’t have so many commits and a lot versions to go through down the line if I ever have to see why I did what I did.

Me, WordPress and Template tags

Recently I have been working more diligently on putting some finishing touches on my personal blog’s theme. Working on a local machine is so much easier now that I understand how it works. I remember when I started out with PHP it was painful.

I got frustrated because I didn’t know where the files had to go at first, the changes I had made to the configuration weren’t taking effect and random little things that almost discouraged me from continuing.

The other day I was reading on the WordPress forums seeing if there was somebody I could help. One thing leads to another and I wind up looking at frameworks, plugins and template tags. Now, I have posted something pretty similar to this before because it was a bit of a rant when I saw somebody posting code I felt was not good practice but that is besides the point at the moment.

What I really want to get to is why I’m writing about template tags. They are an extremely useful thing to know – to some. WordPress has several template tags at your disposal and I love it. There are however some that I have seen in some themes that I would love to use in some of my themes down the road.

A perfect example is using a template tag for navigational links. WordPress has a really good template tag:

< ?php posts_nav_link(); ?>

Simple. It does the job: create navigational links for more posts. I feel the downside to that is that it is all in one container. Yes, there are ways around it by creating your own template tag (which a lot of people seem to do) and use that instead. But what to use? I like the Kubrick method of navigational links where rather than using the one

post_nav_links()

you use two in one. Creating a previous and next link is easy. A better way of doing this is if you are using just the bare minimum amount of files in a WordPress theme is using conditionals to create the navigational links for certain looks.

< ?php
/* Create page navigation and post navigation
 * depending on what is being viewed.
 */
if ( is_single() ) { ?>
  
< ?php } else { ?>

< ?php } // end else statement

The little snippet works fairly decent but it is a little cluttered. It can be simplified a little more so that the only things that change are the

<

div>s containing the actual links. So we can modify it to:

< ?php
/* Create page navigation and post navigation
 * depending on what is being viewed.
 */

Now we don't repeat code and saves some processing power for other things. Amazing what cutting down two lines of code will do! Now we can wrap all that into a function and use it as a template tag to make things easier in an

index.php

file. So the final code would look something like:

/* Create page navigation and post navigation
 * depending on what is being viewed.
 */

function my_theme_nav_links() { ?>
  
< ?php }; // end my_theme_nav_links() 

Now we can use the function anywhere in our theme for post navigation.

Theme progress – good

Slowly but surely my blog’s is coming together. The one thing I am now attempting to do is work out a gallery system. While I do like the Twenty Twelve’s way of presenting the image gallery I want something a little different. The way the Twenty Twelve handles the images is by linking to a page. I don’t want that on mine. Part of that reason is because I won’t be having very many images that are bigger than 800 pixels wide.

What that really entails is that a person with a computer screen of about 13 inches will be seeing more photo than they bargained for. I don’t want to do that. Especially if a person is using a mobile device. That means that image would be the only thing that they see. That is a big no bueno for accessibility. Having to scroll side to side to view an entire image on a mobile device decreases the user experience in my book.

What I have so far is the single, comments, index, search form, sidebar, content, header, and footer pages completed. I still have to work on the functions, tweaks, custom template tags, page and post formats code pages. The one that I know will give my some issues will be the gallery.

I am slowly learning how to code that because the built-in gallery shortcode is not HTML valid. It outputs a element even when there is no caption for the image. What I have to do is one of two options: filter the gallery or remove the gallery shortcode and use my own. For the time being I think I will just have to settle for filtering the gallery output to get the desired result. Not that big of a deal; at least I’ll learn on the way.

The one thing I still have to finish, oddly enough, is the images that I will be using. I’m not sure if I will use individual files or just one since I do want to be able to support HiDPI down the road but that is another subject for another time. Right now I still have a few functions to declare and a few more things to code.

Emmet – Zen Coding

Okay, I just recently found out about this amazing Notepad++ plugin and I am beyond in love with it! I had tried using Zen Coding but for some strange reason it didn’t work. It could have been me, to be honest.

The plugin works very simply by creating shortcuts to cut the development time. These shortcuts are simple snippets of code which come very handy when creating sample layouts.  When it comes to creating my theme I have found that it has helped me in thinking about how to think semantically for the web.

The way Zen Coding works is pretty straight forward and I love it for that. You input a string of text that you want, expand it and all the markup is done for you.

Sample of the before expansion
Before expansion.

It works a little like math, at least it looks like it to me. Still trying to understand the syntax but it looks fairly simple and I love a small challenge. When you go to expand you have to make sure that you are on the last character or it will expand everything up to where the cursor is at.

After expansion
The markup after expansion

I’m going to have plenty of fun with this one. 🙂

Code – Theme status: structure

So far I have been experimenting with adding theme options to my theme for when I get ready to actually share the theme with the WordPress community. I have the basic file structure that I want to be using for themes down the road. It is of course HTML5 and I’ll try and mess around with CSS3 and transitions eventually.

The basic markup is:

< !doctype html>


  


This should be a rough guideline for the future themes and pages I create. The next stage will be using PHP to display all the dynamic content.

The reason I think this is a good structure is because it almost replicates a book. The <header> tags act like the index for the site while the <footer>  acts as information and the <div> with the class of content is, of course, the content of the site.

Next step: files to be used and the folder structure.

Code – some random javascript conditionals

Warning: what you are about to read deals with code.

Working with PHP is fun for me. At times it can be a pain but I still love it. One thing that I have been trying to find is an AJAX media query for loading certain stylesheets when the viewport is at certain widths. I know that it can be achieved but what I’m wondering is how I would pull this off with WordPress.

jQuery makes it easier to achieve since it is a library to help the development process. I know I will begin with that and PHP but the next step will be creating the necessary files.

Of course I want to think mobile first but my dilemma is that would require http requests – to the best of my knowledge. The good side about that is that yes it would load the needed stylesheet and won’t do any browser sniffing so it relies on the viewport and resolution of the device.

On the plus side I can pretty much start it fairly quickly with a simple jQuery call.

$( window ).resize( function(){
  var width = $( window ).width();

    if ( width < 640 ){
      // Load this stylesheet
      } else if ( 641 < width < 800 ) {
      // Load this stylesheet
      } else {
      // Load this one
      };
});

Now what this really does is check when the screen is resized and not really for the initial width which is what I need to check for. So, what I really need is to first check the width and load the stylesheet accordingly and if the window gets resized run that same check. So I can create a new self invoking function and see how that would work.

var w_check = (function(){
  if ( width < 640 ){
      // Load this stylesheet
      } else if ( 641 < width < 800 ) {
      // Load this stylesheet
      } else {
      // Load this one
      };
})();
$( window ).resize( w_check() );

But then I run into the issue of having more than one stylesheet opened at once and risking the theme getting all warbled. 😐 Yes, they would still have media queries but can I safely use all at once without hurting the layout? I think I may just have to test this out before I deploy. Notepad++, here we come!!

My WordPress theme

I finally, finally got the ball rolling on what will be my theme and theme structure for this site! I am so excited about this. After having read so many posts about templates, CSS, OOCSS, SaSS, PHP and just about any random acronym you can possibly think of I finally have a name for the theme and the look.

The name is actually inspired, of course, by Flamenco. I am calling the theme: Soleá. The name is a the type of compás, or time signature that is in one of two forms. 3/4 and 6/8 time is a simple way of putting it but there is more to it. It doesn’t really follow the basic musical pattern but I’ll let you research that on your own if you want to really learn more about Flamenco music.

I am slowly learning how to work with TortoiseSVN as my local version control and will try to gain more knowledge with github with this theme as time progresses. I know that my second theme will be a lot easier to work with once I get the hang of my workflow and work area.

Photoshop is a great tool and I love using it. Notepad++ and I have been getting along more and more and Chrome has been very dear to me in this learning process. Forums and web articles I have read are great and taught me not only new techniques but also helped improve my way of thinking about programming.

The theme is a simple theme with very few images to cut load times. The colors I have chosen are black, a dark blue, a grey tone, and blue tone as an accent and for emphasis for certain elements like links and some headers.

The only images I chose to use are for the header and maybe a divider for the bottom of the article when being viewed as a list of and not a single view. The one view that will be a little tricky to finagle will be getting the gallery the way I want.

There are so many ideas that I want to use for the gallery format postings but I think I may just go ahead and implement a simple one. Click on an image and it takes you to the single image page and not having a modal window with the gallery of images; that version I’ll try to implement for the next theme or maybe as an update.

The reason I am wanting to release said theme is because I want to learn more about web development and I hope to share my learnings with the community as well as others. So in the next three, or four weeks, please don’t be alarmed if I start posting three things in one day about code. It will serve as a way for me to organize my thoughts and ideas as well as sharing my pains with the world and hopefully some people gain some insight how to code for their own projects down the road.