Web and Life in the Beltway

Next week, Congress will be voting on the SOPA and PIPA acts.  These acts are supposed to stop copyright infringement on the web. As my own web skills have developed to a point where I can start to invent my own ideas and I start to take my own photos, I understand how important copyright is. These bills go to far. For example, if you own a WordPress.com (hosted on wordpress) blog and you show a clip of a TV show improperly, your site could be shut down along with WordPress.com. Scary. As of today, there are 80 supporters of SOPA, most don’t have a clue on how the web works. Inspired by vice.com, I’m highlighting SOPA/PIPA supporters who don’t use copyrighted material correctly.

Dear Rep. John Barrow of Georgia’s 12 District:

I’m writing to you today as a fellow Democrat. You are a supporter of SOPA. I am not, but we do agree with the need to protect copyrighted material and that copyrighted material should be used properly. I want to see you get elected next term, Rep. Barrow, so I feel it is my duty to tell you that you are improperly using the Twitter logo on your site. The “t” is the old logo. They want to you the bird now. You can read about it here. Twitter even gives you images. I hope that this minor embarrassment will save you a bigger embarrassment later if Twitter decides to call you out if SOPA passes.You wouldn’t want your site shut down, would you?

Does this sound petty? It’s in the bill you support.

Think about it.

Also, while you are asking your webmaster to change your Twitter logo. Have them take a look at your navigation bar on your photo gallery page? Do you see how when you are looking a photo gallery the “News Center” and “Services” drop down menu go behind the photos? Tell your webmaster to increase the z-index of the navigation div. It’s an easy fix.

As a new coldfusion developer, I have a nemisis. It changes every month. For awhile, it has been getting a form to upload a file, store it, and email it. I figured it out this week.

For this example, you’ll have 2 files: form.cfm and thank_you.cfm.

On the form.cfm page, you’ll have this for the beginning of your form:

<cfform action=”thank_you.cfm” enctype=”multipart/form-data” method=”POST” name=”Form” >

The upload field will look like this:

<input type=”file” name=”myfile” enctype=”multipart/form-data”/>

On the thank_you.cfm  page, you’ll have the following to insert information into the database:

<cfinsert datasource=”mydb” tablename=”mytable” formfields=”list form fields” />

This code will help coldfusion recognize your file and store it in the database:

<cffile accept=”application/pdf, application/vnd.ms-word, application/msword, application/vnd.ms-excel” action=”upload” destination=”d:destination on server” filefield=”myfile” nameconflict=”makeunique”>

<cfquery name=”myfile” datasource=”mydb”>
UPDATE mytable
SET myfile = ‘#CFFILE.ClientFile#’

</cfquery>

To email the file, use the following attribute in your cmail tag: mimeattach=”d:\destination\#CFFILE.ClientFile#”

Let me know if you have other ideas or suggestions for uploading a file and emailing it out.

The web site is a companies lifeline. Hence, knowing a little HTML code is esssential for most jobs in this economy. Writers are required to make updates to blogs. Program Assistants are expected to create their own content for web pages.

It is true you can get accomplish these tasks using the WYSWYG element of your CMS or in WordPress. However, to do your job more effeciently and have your pages be more effective it is important to learn HTML. My coworker recently discovered this. She was trying to create tables using a WYSWYG. It was hard. She had to type a lot. Her end product wasn’t accessible and wasn’t that appealing to the eye. I created sample tables for her. All she had to do was copy-and-paste rows. Then, she added in her content by copying-and-pasting from Word. Simple, right? Yes, she made a few copy-and-pasting errors. There were easily addressed. She now has a table that is accessible to the public and pleasing to the eye. Something she couldn’t achieve via the WYSWYG. Isn’t that what we all want?

So, how do you get there? If you don’t have a tech brain. HTML seems a little scary. Writing HTML code according to web accessible guidelines is even scarier. Personally, I recommend the Head First series for beginners. Don’t let the bodies on the cover full you. These really are good books. They have cover the material in several ways. You can read it. Write the code. Answer questions. Do puzzles. Read some more. The repetive nature is a little trite at times. However, it gets the job done. You learn how to write the code correctly and why it is important to write code correctly. I recommend you start with their HTML and CSS book first. Once you master those, go to their Javascript book. Then take on, HTML5.

Happy learning! More improtantly, happy creating accessible web content!

I love the diffused light and the color of these flowers. They were taken at Green Springs Gardens in Alexandria, VA. Somehow it gives me how that no matter tough times get, no matter how much drama I find myself in, better things are coming.

Assateague Island is a national seashore off the coast of Maryland. It is about 3 hours away from Washington, DC by car. And, guess what? It has wild horsies.

I’ve always been fascinated by this place ever since I moved to DC. I mean, why not, it is a beautiful beach with wild horsies.

I had an opportunity to visit the Assateague Island on my way back from Ocean City, Maryland. The park entrance was about $15 (they take credit cards). I drove it, but I believe you can walk/bike over the bridge to the island for much cheaper.

I asked the ranger the most obvious question. Where are the horsies? She said, it varies depending on the day. So, I figured by best option was to go hiking.

I hiked the island in search of taking pictures of them. I had no luck and gave up. However, the Universe had different plans for me. When I arrived back in the parking lot, the horsies were eating dinner. Here are some of the pictures I took:

For safety reasons, you are not allowed to touch the horses on Assateague Island. As folks were gathering to take pictures of the horses, a ranger showed up and barked at us that if we touched the horses, we would get a ticket. In the photo below, the ranger is standing to my left, about 3 feet out of frame. That’s why I looked so nervous.

And the best part, I crossed #23 off the bucket list.

I’m in the midst of a project right now. It is a web project that would bring a lot of improvement. It is also a project that is taking a lot longer than I want for a variety of reasons. No one to blame. It’s just trudging a long.

Now, for awhile, I was frustrated by this. I mean it is preventing me from doing other things. It is preventing progress. However, I realize that I’ve been frustrated by this September. True to the Universe, it is still here.

The project is really for the best. I want it. So, I’m going to start feeling like it is already here. I’m going to rejoice in the fact that we have a good product and I’m going to rejoice in the fact that it is here. The person who is working on this is a god-send who created a good product. And I thank the universe for finishing it. So, much so, I’m leaving the office and going for ice cream.

Google Analtyics can let you track outward links. This assumes you have implemented the regular tracking code.

First, you’ll have to add this code right before </head> tag. This is found in the  header file.

<script type="text/javascript">
  function recordOutboundLink(link, category, action) {
    _gat._getTrackerByName()._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100);
  }
</script>

Now, let's say you have a link to my site. The code should look
like this:
<a href="http://www.michelledupray.com">Go to Michelle's Site</a>.

To get Google to record how many people you send to my site,
you'll have to add some javascript to the link code.

This is the code you have to add (all one line):

onClick="recordOutboundLink(this, 'Outbound Links',
 'example.com');return false;"

This is how the final link should look (all one line):

<a href="http://www.michelledupray.com"

onClick="recordOutboundLink(this, 'Outbound Links',
 'example.com');return false;">Go to Michelle's Site</a>

Make sure your in old version.
1. Log in to google.com/analytics with your gmail account.
2. Set up your account.
3. Click on “Edit in Website” Profile Area.
4. This takes you to profile settings page.
5. Click on Check Status in Upper-right corner.
6. This will take you to code. Copy.
7. Paste this code right before the tage at the end of your page code. If you use WordPress. This is in the footer file. (You’ll find this Appearance >>Editor).
8. Go back to the main profile area. You chould have it receiving now. Sometimes Google Analtyics is finicking. If it is not tracking. Recopy your code. Delete it from right before the tag and paste it right before the tag. This is found in the Appearance >> header area of WordPress.

Nothing is more annoying than seeing a web page laid-out in a table. (Trust me, it causes more problems that it solves.) The question is: how do you make a table that is accessible. Let’s learn how. And I’ll give you code to copy for later.

The sample table we are going to work on is a Weekly Menu. The table will have two headers.

The first thing you will need to do is create code for the user to know what the table is about at first glance. This isn’t required by Section 508, but is generally a best practice. You’ll be adding a summary attribute to the <table> tag as well as a separate <caption> tag after the opening <table> tag.

<table style=”width: 500px;” summary=”This table is a weekly menu of breakfast, lunch and dinner items at Michelle’s apartment”><caption style=”text-align: left; font-weight: bold;”>Michelle’s Weekly Menu</caption>

Section 508 §1194.22 (g) requires that row and column headers shall be identified for data tables. This means using the <th> tag to identify the the table headers. If we only had one row of headers, using <th> alone would be okay. However, we’ll be having two (days of the week and meals). So, it will also be necessary to use scope=”col” and scope=”row” where appropriate.

Here’s the table so far:

Here’s the code. Notice that we also added a scope=”col” attribute to all the th cells. We want the screen reader to know the cell is a head of a column. We also added an id attribute to give the header a name.

<table style=”width: 600px;” cellspacing=”0″ summary=”This table is a weekly menu of breakfast, lunch and dinner items at Michelle’s apartment”><caption style=”text-align: left; font-weight: bold;”>Michelle’s Weekly Menu</caption>
<tr style=”color: #fff; background-color: #bfa1e7;”><td style=”width:100px;”>&nbsp;</td><th style=”width: 100px; Padding: 10px;” scope=”col” id=”Monday”>Monday</th><th style=”width: 100px; Padding: 10px;” scope=”col” id=”Tuesday”>Tuesday</th><th style=”width: 100px; Padding: 10px;” scope=”col” id=”Wednesday”>Wednesday</th><th style=”width: 100px; Padding: 10px;” scope=”col” id=”Thursday”>Thursday</th><th style=”width: 100px; Padding: 10px;” scope=”col” id=”Friday”>Friday</th></tr>

Next we’ll add our first regular row of data.

Notice in the code the first cell is a header with a scope=”row”. The data cells have a header attribute to identify what row and cell it belongs to.

<table style=”width: 500px;” summary=”This table is a weekly menu of breakfast, lunch and dinner items at Michelle’s apartment” cellspacing=”0″><caption style=”text-align: left; font-weight: bold;”>Michelle’s Weekly Menu</caption>
<tbody>
<tr style=”color: #fff; background-color: #bfa1e7;”>
<td style=”width: 100px;”></td>
<th id=”Monday” style=”width: 100px; padding: 10px;” scope=”col”>Monday</th>
<th id=”Tuesday” style=”width: 100px; padding: 10px;” scope=”col”>Tuesday</th>
<th id=”Wednesday” style=”width: 100px; padding: 10px;” scope=”col”>Wednesday</th>
<th id=”Thursday” style=”width: 100px; padding: 10px;” scope=”col”>Thursday</th>

</tr>
<tr>
<th style=”color: #fff; background-color: #bfa1e7;” scope=”row” id=”Breakfast”>Breakfast</th>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Monday”>Oatmeal</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Tuesday”>Eggs</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Wednesday”>Smoothie</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Thursday”>Peanutbutter Toast</td>

Here’s the good news. You can officially become lazy. Copy the data row and simple add in new data by hand. I choose to take out the light purple and have the data cells be white. (Personal opinion as I think it makes it easier to read.)

Here’s the new code:

<table style=”width: 500px;” summary=”This table is a weekly menu of breakfast, lunch and dinner items at Michelle’s apartment” cellspacing=”0″><caption style=”text-align: left; font-weight: bold;”>Michelle’s Weekly Menu</caption>
<tbody>
<tr style=”color: #fff; background-color: #bfa1e7;”>
<td style=”width: 100px;”></td>
<th id=”Monday” style=”width: 100px; padding: 10px;” scope=”col”>Monday</th>
<th id=”Tuesday” style=”width: 100px; padding: 10px;” scope=”col”>Tuesday</th>
<th id=”Wednesday” style=”width: 100px; padding: 10px;” scope=”col”>Wednesday</th>
<th id=”Thursday” style=”width: 100px; padding: 10px;” scope=”col”>Thursday</th>

</tr>
<tr>
<th id=”Breakfast” style=”color: #fff; background-color: #bfa1e7;” scope=”row”>Breakfast</th>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Monday”>Oatmeal</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Tuesday”>Eggs</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Wednesday”>Smoothie</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Thursday”>Peanut butter Toast</td>

</tr>
<tr>
<th id=”Lunch” style=”color: #fff; background-color: #bfa1e7;” scope=”row”>Lunch</th>
<td style=”padding: 10px;” headers=”Lunch Monday”>Veggie Pizza</td>
<td style=”padding: 10px;” headers=”Lunch Tuesday”>Sushi</td>
<td style=”padding: 10px;” headers=”Lunch Wednesday”>Salad</td>
<td style=”padding: 10px;” headers=”Lunch Thursday”>Indian Food!</td>

</tr>

I’m finally going to add the last row in. Yes, I’m copying-and-pasting. Why do the extra work?

Here’s the final code:

<table style=”width: 500px;” summary=”This table is a weekly menu of breakfast, lunch and dinner items at Michelle’s apartment” cellspacing=”0″><caption style=”text-align: left; font-weight: bold;”>Michelle’s Weekly Menu</caption>
<tbody>
<tr style=”color: #fff; background-color: #bfa1e7;”>
<td style=”width: 100px;”></td>
<th id=”Monday” style=”width: 100px; padding: 10px;” scope=”col”>Monday</th>
<th id=”Tuesday” style=”width: 100px; padding: 10px;” scope=”col”>Tuesday</th>
<th id=”Wednesday” style=”width: 100px; padding: 10px;” scope=”col”>Wednesday</th>
<th id=”Thursday” style=”width: 100px; padding: 10px;” scope=”col”>Thursday</th>

</tr>
<tr>
<th id=”Breakfast” style=”color: #fff; background-color: #bfa1e7;” scope=”row”>Breakfast</th>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Monday”>Oatmeal</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Tuesday”>Eggs</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Wednesday”>Smoothie</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Breakfast Thursday”>Peanut butter Toast</td>

</tr>
<tr>
<th id=”Lunch” style=”color: #fff; background-color: #bfa1e7;” scope=”row”>Lunch</th>
<td style=”padding: 10px;” headers=”Lunch Monday”>Veggie Pizza</td>
<td style=”padding: 10px;” headers=”Lunch Tuesday”>Sushi</td>
<td style=”padding: 10px;” headers=”Lunch Wednesday”>Salad</td>
<td style=”padding: 10px;” headers=”Lunch Thursday”>Indian Food!</td>

</tr>
<tr>
<th id=”Dinner” style=”color: #fff; background-color: #bfa1e7;” scope=”row”>Dinner</th>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Dinner Monday”>Pasta</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Dinner Tuesday”>Fish & Potatoes</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Dinner Wednesday”>Lemon Chicken</td>
<td style=”background-color: #d4c6e9; padding: 10px;” headers=”Dinner Thursday”>Stirfry with chicken</td>

</tr></tbody></table>

What you seen this box to the left before? It’s a new technology rapidly growing among mobile users. The box at the left, called a Quick Response code (or QR code for short) functions like a UPC code you see at the grocery store. With the help of an App (ScanLife). You can use the app to scan the box, which will take you to a web site.

QR codes were started by Toyota to track auto parts. This was back in 1994. I’ve seen it used it several commercial and personal ways this year, including:

• The NBC station in DC used a QR code during their coverage of Hurricane Irene. They encouraged viewers to scan the code, which referred them to their website in case they lost power
• Business cards. Users were taken to a LinkedIn account.
• In the dressing rooms of New York and Company
• And on New York and Company store fronts!
• promotional mailings

Here’s where I’d like to see them:

• Next to products at the grocery store. You can look up the nutritional information at a later time.
• During a conference, you can check to see who is speaking at what session
• During a conference, you can scan someone’s tag instead of exchanging business cards
• On hiking/historical trails so you can save random facts about a landmark
• Concerts, plays, movie posters. You can preview the act before you pay money to see it.

Finally, here is another example. I took a picture of this ad in the DC metro. It is advertising an exhibit at a Smithsonian. Where have you seen a QR code? Any creative uses?