"Bear with me a moment..."

LogBlog

Pat Logan's Web Log

"But any reasonable concept of democratic citizenship requires an individual
who is able to discern knowledge from propaganda,
is competent to choose among conflicting claims and programs,
and is capable of actively participating in the affairs of the polity."—Aronowitz

(Return to blog summaries)

This personal Web page is not an official University of Rhode Island Web page. See URI disclaimer

Sep. 29, 2013

Is Web Development on the Right Track at URI?

The Tao of Web

It is not difficult to create a web page.

You write something, then enclose it in "tags"
<p>"...and that's all I have to say about that," says Forrest.</p>
and save it as a file on a web server, like saving files on your home computer.

Tags make up the Hypertext Markup Language ("html") that web browsers depend on; there aren't many tags—maybe 20 or 30 that do almost all of the work—and you can learn html quickly; click here if you'd like to learn a bit more.

Html creates logical structure for text, marking paragraphs with <p>, for example.

"The Tao of Web" (above) is tagged as a medium importance header (<h4>), and the page title, "Is Web Development on the Right Track at URI," uses high importance (<h1>) tags.

The <a> tag is used for links; it needs the address ("hypertext reference file") of a file that you'd like to link to: (<a href="mypage.html">Take me to my page.</a>).

If you have some data, you might want to create a table(<table>) full of rows (<tr>) and columns (<td>).

Html can even link to that picture of your cute kitty <img src="cuteness.jpg" >, doubtless the best kitty image ever. And when you've come to the end of a section, draw a horizontal rule across the page, <hr />.


HTML just isn't that difficult.

HTML is relatively simple because it was designed to send scientific papers in the black-and-while world pre-1992. Then came faster connections, the ability to transmit ever-larger image files, color, and the web as my students have always known it.

Style Matters

The visual look of web pages became more important as more and more people began to find a use for them. By the mid 1990s, that meant just about everyone who could afford a computer, and if you couldn't afford one this year, the price was sure to drop by half in a year or so. The task of controlling the appearance of a page was being handled by a separate language, Cascading Style Sheets ("css"), written right into the page, integrated with the html. Rules consisting of selectors, properties, and values were written within a <style> html tag. If I wanted to select paragraphs and color them blue, I could write

<style type="text/css>
p { color : blue ; }
</style>

which would make all of my paragraphs blue (too much!), or I could limit my style by setting the style within a single paragraph

<p style="color:yellow;">Nice bright yellow!</p>

A single style sheet could be written, then linked to from all the pages in a website. Tired of that background blue and ready for some festive red? Write body {background-color:red;} in your style sheet and all of the several thousand pages in your website are all decked out for the holidays.

CSS has a lot of properties, and properties usually can take several values—which may take a while to learn—but all-in-all, CSS just isn't that difficult, either.

Programming Rules!

Browsers could even follow simple instructions written right into the web page in a programming language, javascript. This gave web developers the ability to alter the look of the page in response to a click of a mouse or a keyboard.

One part of the page can affect another, or itself.

Make the other button red

Make this button red

Here is the html with embedded JavaScript:

<p class="button" id="red" onmouseover="document.getElementById('green2').style.backgroundColor='#900';", onmouseout="document.getElementById('green2').style.backgroundColor='#090';">Make the <em>other</em> button red</p>
<p class="button" id="green2" onmouseover="document.getElementById('green2').style.backgroundColor='#900';", onmouseout="document.getElementById('green2').style.backgroundColor='#090';"<Make <em>this</em> button red</p>

You may also program the browser to check a form before further processing. This form will only work if you enter letters into the Name box. Try it! (Enter nothing, a number, or your name.)

Enter your name in this box, please

In truth, you don't need javascript to make a web page, and it is a little (but not a lot) more challenging at first than learning html or css. But if you learn it, your pages can do a bit more work for your users, and do cool tricks.

The Web and the Classroom

You don't have to be young or a computer scientist to make web pages. I'm ancient and an entomologist, and I can make them. I use html, css, and javascript to make online lecture notes for all of my courses. Here's a page from my web development course where I write about a very impressive use of javascript by the National Science Foundation, and how I was able to find how it was done. Here's another page that uses the technique, a page from my freshman science communication course, where I augment a challenging lecture with dozens of footnotes—all available as pop-ups driven by the same NSF javascript—to provide information, links, or references to enhance the scholarly depth of materials for students.

Go ahead and click on the link. When you get there, try footnote [1]. Then come back here (use the browser's "back" arrow...but you knew that, didn't you...), ok?

It has taken me a while to learn this, and it took a good part of a summer to produce the rather elaborate notes for my freshmen (not to mention the 2-column print version of each page that I made using print media program InDesign). But remember, I'm ancient and self-trained, so....

(Oh, and in case you were wondering, I also think it's important to learn about server-side programming and databases, which is how the real web runs (think Amazon or LLBean). Here's a report written this summer, built around a database; most of the numbers in the report, and most of the 10 appendices that list courses, come directly from the database; if I change the database later, the report and appendices automatically change. I had to teach myself PHP for server programming, MySQL and SQL to work with a database, and AJAX to do really slick interactive forms. Okay, you have to be a card-carrying nerd to understand the awesomeness of that AJAX thing, but the point is, if this old fossil can do it, anyone can.)

In truth, I frequently ask myself how it is possible for my colleagues to do their work at a university without minimal web skills. It's almost like being an academic without being able to use a word processor. When I first came to URI, secretaries typed, and faculty usually couldn't imagine having to learn that Microsoft Word Processing Program on the computer machine thingy. That time certainly changed. And being web-illiterate...well, maybe that time will change, too.

So, URI is improving training in html, css, and other useful core web technologies, and also creating a support staff of competent web developers to meet the myriad needs of faculty and staff.... Right?

Wait! WordPress?

This summer, it was announced that URI has embarked on a project to move all current administrative (down to department level) and most faculty web content into WordPress. The old web server, www.uri.edu, will be shut down and replaced with a new server, web.uri.edu, that runs WordPress files only.

What's WordPress? WordPress is an open-source product originally intended for bloggers to upload their writing into an environment that would then control the appearance. Style was subject to "themes," essentially pre-packaged styles. Easy and quick to choose, but limited. URI controls themes under its branding guidelines, so that most pages will come to look alike. Okay, but eventually dull and strictly conformist. I asked a student WordPress programmer about how to upload a style sheet, and drew a blank look: "I don't know what that is." So, you get to look like everyone else. Period. Probably great for branding, in a sort of eastern European sense of style (choose your shade of same-old grey).

WordPress is great if you just want to copy some text into a box, stick an image on the left or the right, and choose from limited options predetermined by the official approvers of "themes." It's a paint-by-numbers approach to visual arts. You can turn out a seascape quickly, but it still looks like paint-by-numbers.

URI's WordPress files will be unique to URI's WordPress set-up. Want to send pages to colleagues on the west coast? That's unlikely to work, unlike standard web pages. Isn't that something we think about at URI? There's a world outside!

I was told to put my lecture notes into WordPress pages. The scripts, which depend on style sheets and interactions with identified elements of the html structure? URI's wordpress "scrubs out" the html id = attribute, essentially crippling CSS and stopping javascript. And what about my summer of work to make web pages that will work on any server anywhere else in the country? ("Well, what were you planning to do next summer anyway?") (I've made my case and been assigned to my own virtual server, not part of web.uri.edu, where scripts, php, and databases can run without threatening to bring down the universe.)

Secure? If you break the model that allows browsers to work by scrubbing out essential parts like the html id = attribute (and cars would all be safer if we scrubbed out all that dangerous gasoline). Better at search engine optimization? People making such claims have no idea what they are talking about. Fast? No, almost certainly slower.

Main reason for doing this? Mainstream web development technologies require learning, which takes time and costs money. Instead, the web at URI must be constrained by an approach where anyone can update pages with no real technology skills...painting by number.

URI is taking a huge step. In an effort to provide a simplistic solution to the simple problems of simple web pages (say, 80% of the administrative pages), URI's WordPress solution is about to get the University's web technology stuck in a chapter of "Web for Dummies." Unfortunately, real needs for real web developers (the 20% of pages requiring sophistication and state-of-the-art technology and artistic professionalism) continue to be ignored. It's like a scene from Idiocracy, the movie. Enable the amateurs; put them in charge of the web. What could possibly go wrong?

(Return to blog summaries)