July 29, 2014

I like to code…do you?

This post is a long history of my website development efforts in the school district where I work. I provide a thorough overview of the websites I maintain and how they are hosted and coded. This nerdy navel-gazing retrospective was triggered by the several weeks I spent this summer coding mobile versions of the websites for our school district and high school. This the first of five consecutive blog posts in which I elaborate on that coding adventure.

Frankly, while this history is of interest to me, it really might not interest you. So if you don’t relish reading about every website I run and how it is hosted and some background on why I use various services and software, please feel free to click away from this post. If you’re into visuals, you could pick out a set of my travel photos to peruse. Or check out the big multi-post summer trip travelogue about the trip Wendy and I took along Route 66 this summer, which is chock full of scenery and art.

Okay, that pared things down to the truly nerdy, right? Here we go!

My 1989 bulletin board machine

It Started as a Hobby

I have been hand-coding HTML websites for almost two decades, and before that ran a couple of primitive dial-up bulletin boards dating back to the early 1980s.  The only computer courses I ever took were a high school course in BASIC in the early 1980s and a college course in FORTRAN in the mid-1980s. So I acquired my knowledge of HTML from trial-and-error coding based on the source code at various websites, various web tutorials, and good tips back in 1998 from Vincent Flanders’ books based on his venerable Web Pages That Suck website.

I learned HTML by doing, not studying. But learning how to improve and update my code with CSS (cascading style sheets) was another matter. Its nesting and different cascades of styles was bewildering until I picked up and carefully read David Sawyer McFarland’s CSS: The Missing Manual back in 2006. I was using the first edition of that book; I see he’s up to the 3rd edition now and I’ll bet it is just as invaluable.

I recommend this book for learning CSS

I’m hardly a CSS expert, but I can figure out what is going on eventually. It became much easier to cope with when I shifted from an old web editor to Adobe DreamWeaver CS6. I’ve only tapped part of the power of that program, which has many tools to help you figure out what to do and, perhaps more important, what has gone wrong in your code.

But for some websites coding everything by hand is not necessary, or even the wise thing to do. I have written before about my evolving personal websites, with me eventually switching from a hand-coded website, hosted by my cable provider, to the Blogger service and then finally to WordPress.com in 2008. Using the blog services makes creating posts far easier than hand-coding, and I don’t need fancy layouts for blog posts. So long as I can plop in and scale to my liking some linked photos with the text, I’m set for blog posts. I’m still quite happy with the existing design of MEADOR.ORG and the editing capabilities and free hosting at WordPress.com, but I know that someday this site will need another overhaul. But hopefully that is far in the future.

Now It’s More Than a Hobby…A Bit More

I’ve created many websites over the years; some were for my personal hobbies like local history, and several were pro bono public services for local foundations and the like.  But I am actually paid to code and update only two websites: the ones for the Bartlesville Public School District and also for Bartlesville High School. Mind you, I’m not paid much for those duties at less than $7 per day for them both, but something is better than nothing for us woefully underpaid classroom teachers in Oklahoma.

The high school’s homepage

I took over the high school website back in 2004 and have fully re-vamped its look a couple of times, with the last major overhaul back at the start of 2009. Back then I thought I might shift the site to a free hosted service, such as Google Sites, but in the end I only used Google Sites for the news items at the school, since several have to be posted each week. I like the ability to have a scrolling feed of posts on the homepage which visitors can select from.

In February 2012 I did set up a full website via Google Sites, one devoted to instructional technology support for the district’s teachers. That superceded a long series of hand-coded help pages I’d created over the years on the high school site.

A Coder, A Coder, My Website for a Coder

The district’s homepage

Back in 2011-2012, the district’s volunteer webmaster left; yes, the district website was being done pro bono by a helpful district technician. The district’s continuous budget woes meant that it still did not want to invest in a managed content website from a provider like SOCS; we still leave that to richer and bigger districts like Jenks. So the district’s website stagnated and by the end of that school year I was desperate for an update – desperate enough to roll my own version in HTML.

Without anyone’s prompting, I coded a new version of the district website and presented it to the administration. They adopted my replacement version and the very sweet school board members bought me a sizable gift card out of their own pockets. Remember, school board members in Oklahoma do a lot of work for zero pay; most are as altruistic as the teachers they employ.

To its credit, the district then managed to start paying me a stipend for maintaining the district site. That goes along with the stipend my principal pays out of her site budget for me to run the separate high school website. Those stipends have enabled me to keep making steady refinements to the sites and keep up with the many changes in documents and links which everyone needs done.

Out-of-Pocket if not Out of My Mind

Wouldn’t you rather code on this?

Mind you, the district is so underfunded and Oklahoma school finance so restricted that I still am out-of-pocket some expenses. State school finance laws meant that I could only use a district-provided copy of the Adobe Dreamweaver website development software at home if I restricted myself to using it on a years-old school laptop. That’s hardly appealing when I am used to coding on my decent home desktop machine using a 24″ main monitor for coding and a smaller adjacent monitor for previewing. So in September 2012 I spent $179 out of my own pocket to purchase a home copy of Adobe Dreamweaver CS6. I’m still relying on it because Adobe has gone to a subscription model and no longer sells stand-alone copies of DreamWeaver. I’d need their Creative Cloud bundle to get DreamWeaver updates, and that carries a regular price of $30/month. Even with my educator’s discount, it would cost $20/month, meaning I’d have to shell out over 10% of my annual webmaster pay to have the Creative Cloud on my home machine. My webmaster pay is too little to take that kind of hit, given that I’m already shelling out $90/year for my personal subscription to Microsoft 365 for use on my Windows desktop, Macbook Air laptop, and iPad tablet computers.

Why Not Use Cloud Services?

Most of our district sites have switched to MyBigCampus

So the extremely limited budget means that I’m sticking with my old DreamWeaver and free cloud services to keep our sites running. This summer, tired of hand-coding the homepage’s news items, I set up a district headlines site via Google Sites as I had done previously for the high school. And our district’s Instructional Technology Teacher Specialist has been training the elementary and middle schools’ volunteer webmasters to migrate their school websites to the MyBigCampus service our district gets with its LightSpeed internet services contract.

MyBigCampus is far too limited to be used to replace my existing high school and district websites, and while I could try to approximate them in Google Sites, the design limitations and storage restrictions would be onerous. So I’m still hand-coding the suckers. Eventually I suppose the district will pay for a managed-content system that not only makes building and maintaining the district and school websites easier, but more importantly provides teachers with easy ways to build their own course websites and calendars. But until then we’ll be using Google Sites and Weebly and MyBigCampus and the like.

I use Google Sites for the local teachers’ union website

I use several free cloud services for website hosting and development. Google Sites not only handles the district news and technology support sites, but also the site for the local teachers union. Facing a slew of curriculum revisions, I’m thinking of shifting the old hand-coded Science Department website over to Google Sites as well.

I also use Weebly to sell my physics curriculum, and found the very-cumbersome-but-free AwardSpace to host my site on local history after my local cable company stopped providing web hosting.

There are also more advanced for-pay services out there, such as SquareSpace with its mobile-responsive design and drag-and-drop interface. The catch there is the for-pay part.

Do It Yourself If You Want It Done Your Way

The truth is that if you really want to control every aspect of a website, nothing beats coding it yourself by hand. And if you can’t spend any money, there are decent free services, but they all have significant design limitations. So I still hand-code the district and high school websites, my pro bono site for the local school foundation, a site about the history of our school district facilities, and the sites for our science department and my own physics classes. Those sites are pretty stable, and until July 2014 I hadn’t really learned much new in HTML for several years.

Learning to code for mobile devices

BUT…I did learn a lot of new HTML over the past few weeks. Why and how? Because I decided to bite the bullet and tackle a shortcoming of my district and high school websites, one which was becoming very problematic in this age of smartphones. I needed to create mobile-friendly, touch-friendly versions of each site. And I did not know how to do it. So I learned how to do it the way I acquired most of my knowledge of HTML…by playing around with the editor software, scouring the internet for ideas and examples, and doing a heck of a lot of trial…and error.

My next post addresses WHY I needed to tackle this issue; later we’ll get to HOW.