Assignment 10

We had to add one more feature to our site for this assignment. I added a blog that will actually show my drawings, since my site is about drawing.

I did have to tweak my site a bit. In adding all the pages to my site, I had to shrink the font size in the navigation bar because I didn't like the navigation bar going to two lines. I would have liked to save space by grouping similar pages together, but it doesn't appear that you can add a navigation element that doesn't actually link to a page with Jimdo's basic editor. As compromises for free sites go, it's a relatively minor one.

Overall, I have learned some really useful things in this course. Specifically, I have learned about the wide variety of out-of-the-box tools that can be added to a website without having to know too much about web development. Before taking this course, I would have never guessed that you could basically cut-and-paste chat rooms and discussion forums into a website.

In many cases, there are several options available for everything from web hosting to chat rooms at no charge. With just a little bit of tweaking, sites built with these tools can look professional.

Assignment 9

For this assignment, we learned about accepting payments online. This can be as simple as putting a PayPal donations button on your site, or as comprehensive as an end-to-end solution that handles every aspect of ecommerce on your site.

Since my site is simple and I'm not selling anything, I opted for the PayPal donations button (don't be shy!). But for people in need of more robust solutions, there are plenty of options available. These options may or may not involve PayPal, although a wide variety of retailers use it. Which solution is best depends on what you're selling and what features you're looking for.

If you're selling primarily software or other downloadable content, you might consider MyCommerce. They specialize in the particular issues surrounding downloadable content, such as secure downloads and license codes. Shopify offers complete ecommerce solutions including setting up the shop pages and even integrating with fulfillment providers to make shipping easier.

I wouldn't recommend it as a sole payment option, but I must confess my fascination with Bitcoin. I love it when somebody tries a totally new way of doing things. Bitcoin is an alternative, digital-only currency that isn't tied to any government central bank. There are reputable companies that accept payments in Bitcoin, like Wordpress and domain registrar Namecheap. Remember MyCommerce from the previous paragraph? They also accept Bitcoin.

So, in a nutshell, there are a ton of options out there for handling ecommerce on your site. If you're going to have transactions with any real frequency, it's probably worth your time to research which provider is the best option for your particular needs. Chances are there are some who specialize in businesses like yours.

Assignment 8

The focus of this assignment is interaction. Having some kind of interaction on a site often makes users feel more engaged with the site and more likely to come back frequently.

There are lots of possibilities for interaction on a website. It can be something as simple as a page view counter, or as complex as a discussion forum with multiple topics.

Sometimes web hosts provide tools to incorporate various forms of interaction into your site. But if that isn't the case, there are sites out there that provide a wide variety of interactive features for free, with advanced features available at a cost.

Since my site is simple, I wanted my interaction to be simple, too. I chose to put up a poll that I constructed at Bravenet, which offers everything from simple polls to discussion forums to animated talking characters for a site.

Screen shot of the poll on my site

Feel free to check out my poll and vote in it. If you're unfamiliar with the artistic movements discussed in the poll, there's more information and examples on the page.

Assignment 7

No, I haven't forgotten how to count. Assignment 6 didn't involve a blog post. For that assignment, we had to get our site up and running, which you can see at Danielle Draws.

For this assignment, we added pages to our sites and looked at how to promote them.

Usually when people talk about promoting their sites, they're mostly concerned with search engine optimization (SEO), or getting their page to be as prominently featured as possible in search engines. In my GeoCities days, SEO was all about meta tags. Meta tags are HTML tags that are not rendered in the browser but are picked up by search engines. The tags typically contain keywords relevant to the site, or at least they should.

It might not surprise you to learn that people started to try and scam the system almost immediately by including popular keywords that weren't necessarily relevant to the site. Under United Kingdom law, it's possible to be sued for trademark infringement for certain types of meta tag abuse.

While meta tags still matter, search engines now consider them combined with other factors. The most well-known of these techniques is probably Google's PageRank algorithm, which factors in the number and influence of pages that link to a given page.

Of course, weighting algorithms can be abused, too. Focusing on trying to game the SEO system of the moment just ends up as a sort of arms race between search engines and disreputable sites. That's why I think prioritizing SEO above all is putting the cart before the horse.

I think the best approach is to promote your site by making connections with people through channels such as social media and guest blogging on other sites. If you make real connections and get people genuinely interested in your site, the search results will improve naturally.

That said, I don't think it hurts to put up meta tags, as long as they're actually relevant to your site. Jimdo, the host I chose for my site, has built-in SEO tools in its site builder. There are also tools that register your site with search engines, such as Google Webmaster Tools' URL submitter. I used both of these for my site. I just don't expect them to do all the work of promoting my site for me.

Assignment 5

Our mission for this assignment is to begin work on an actual website for a real or imagined business. In addition to coming up ideas with the structure and content of the site, we also need to evaluate potential hosting options.

My Proposed Site

I am going to build a website for my drawing portfolio. One slight drawback is that I don't actually have one at the moment. My drawing skills aren't even that good right now. But I figure that with forced, regular, (semi-)public practice, my drawing skills will improve. I expect to include the following pages (subject to change):

• Welcome page
• At least some of the drawings (obviously)
• About the project
• Bio
• Favorite tutorials
• Artists I like
• Recommendations for supplies
• Contact form

Here are some individual artists whose portfolio sites I like:

• José Alvarado uses a simple WordPress blog to display his portfolio.
• Jacqueline Bissett has a page featuring her illustrations on a larger site featuring a variety of artists. 
• Shantell Martin uses her own site to display her work in a variety of media, including printed circuit boards with whimsical styles.

In general, many of the portfolio sites I encountered were on aggregator sites or artists using their own social feeds such as Tumblr and Flickr to display their work.

Hosting

Now that I've decided what kind of site I'd like to create, the next decision is where to host it. Since the course leans toward free providers, that is where I will focus as well.

The fine folks at Wikipedia have a table comparing the features of various free web hosting providers. You can even click on the arrows at the top of each column to sort the table by that option. For instance, if you wanted as much storage as you could possibly get, you could click on the arrows in the Storage column, and the table would be sorted accordingly. You even have the choice to sort in ascending or descending order.

Of course, you're not going to get the same functionality that you would get with paid hosting options. Free providers might also display ads on your site. Your customization options are often limited with free providers. Some free providers prohibit certain types of pages or activity such as e-commerce on their sites.

Another thing to be aware of is potential hidden charges. Most free providers limit their functionality in the hope that you will upgrade to one of their paid options. Beware of anything that says "free to sign up" (this is good practice in general online), especially if they ask for payment information.

In my case, many potential providers don't offer features I know I will need later in the course with their free options, so that helped me narrow the field. I will discuss three potential providers for my site.

Wix

Pros: It's not a strict requirement, but it's worth pointing out that Wix's own home page looks slick. I'm more inclined to believe that someone can help me put together an attractive, professional looking site if the claim itself comes from such a site. They have a wide variety of templates available, and functionality such as calendars and shopping carts can be added through the Wix App Market.

Cons: Once you pick a template, you're stuck with it. If you want to change it, you have to rebuild your site. They do offer a blank template, but that isn't likely to appeal to someone who is signing up for a site like Wix to keep things simple. Another complaint that some people have about Wix is the size of the ads. Below is a screenshot of an example site with the ads.

Wix free site with ads on the right and the bottom of the page

Jimdo

Pros: Jimdo offers more robust e-commerce tools than are typically available on free websites. They also provide a mobile app that you can use to create your site. Jimdo also offers the ability to add widgets to customize your site.

Cons: They don't have as many template choices as, say, Wix does. However, they do offer the ability to change templates without losing your content, as well as the ability to edit the template code yourself if you prefer. Some users complain that the page builder interface is not terribly user-friendly.

Webs

Pros: An interesting feature available on Webs is the ability to set up private areas of your site restricted to registered members. They also offer an App Store that allows users to add functionality relatively easily.

Cons: As is the case with Wix, you are limited to how much you can customize the templates with Webs. Also, this review says that the editor is slow to load, which can get irritating when making a lot of changes to your site.

My choice

And the winner is ... Jimdo! All three providers were capable of fulfilling my needs, but the things that are personally important to me tilted the playing field in Jimdo's favor.

This is a bit of an upset victory. When I first saw Wix's gorgeous templates, I thought I would use them. But the lack of flexibility in customizing or even changing templates without losing your content opened the door for other providers to wow me. Since I'm kind of obsessive about customization, that gave the advantage to Jimdo for me. If I had really wanted a private members-only section of my site, I would have gone with Webs. However, I don't see myself using that feature.

Assignment 4

When creating a web page, there is a wide variety of tools available for use. The tools can be as simple as a no-frills text editor, as richly-featured as something like Adobe Dreamweaver, or somewhere in between the two. I will discuss an example of each, including examples of what one HTML file looks like in each tool.

Sublime Text: The Almost-No-Frills Option

I mentioned in the previous post that much of my early HTML editing was done in Notepad, which is a very simple text editor. For simple web pages, I still think text editors can be a reasonable choice, and the one I would recommend for this type of work is Sublime Text. An important feature that Sublime Text offers is syntax highlighting. Syntax highlighting is when different elements of the text are treated differently; e.g., HTML tags are shown in a different color from the text to be displayed. Sublime Text uses the file's extension to load a syntax highlighting scheme, which the user can customize if so desired. Here's an example:

HTML page in Sublime Text

Note the different colors for tags, attributes, values, etc. You may notice what looks like a smaller version of the document in a sidebar on the right-hand side of the image, which is exactly what that is. The nice thing about that is that you can click in a section in the sidebar, and that will bring up the corresponding section in the main part of the window, which is sometimes faster than using the arrow keys or Page Up/Page Down to navigate your document.

Two more advantages of text editors are that they work quickly and take up minimal system resources. One big disadvantage is that you can't see what your document will actually look like in a browser. To do this, you have to open a copy of the file in your browser and refresh when you make changes in the text editor. This can get really inconvenient really quickly, especially once you want to build a more complex page or even work with multiple pages.

KompoZer: A Step Up

KompoZer is a logical step up from a text editor. It offers a split view where the user can see both the original HTML and a preview of what the page will look like in a browser. If so desired, the user can change the view to show just the design or just the HTML.

HTML page in KompoZer's split view

As you might be able to tell from the above image, the menu options are similar to those of a word processor, such as Microsoft Word. This makes KompoZer a good choice for someone who wants to develop web pages with customized content and layout but might not be so familiar with the ins and outs of web development.

One big disadvantage of KompoZer is that it isn't updated regularly. The last beta version was released in February 2010, or nearly 5 years ago at the time of this writing. That's a really long time in web years and means that KompoZer doesn't support some fairly standard current features, like the latest versions of HTML and CSS. Some quick searching reveals that some users who are frustrated with KompoZer's lack of updates have moved to BlueGriffon, which takes a similar approach to KompoZer (similar user interface, based on Firefox's rendering engine), but is updated more frequently. BlueGriffon looks promising, and I might talk more about it in a future post, but for now, I will move on to the next tool.

Adobe Dreamweaver: The Space Shuttle of Editors

Adobe Dreamweaver is probably the most well-known tool for creating web content and the one I used to create my web page. There are two disadvantages that I will mention right away:

• Dreamweaver costs money. Fortunately for me, I have access to it through my university, so I figured I'd take advantage of that for this assignment.
• The user interface probably looks more complicated than anything you've ever seen in your life unless you're:

1.  familiar with other Adobe products such as Photoshop, or
2.  a programmer.

HTML page in Dreamweaver split view

It just so happens that I am a programmer, so Dreamweaver's user interface doesn't scare me. I've spent countless hours dealing with user interfaces like this one:

Java application in Eclipse

Bring it, Adobe. Let's do this.

Like KompoZer, Dreamweaver offers a split view of the source markup and the design. It also has a built-in browser to offer a more complete preview of your page than is sometimes available in the Design view. In the past, I've had bad experiences with WYSIWYG editors adding loads of unnecessary markup, but I didn't find that to be the case here. It's true that there are a ton of tabs, pull-out menus, etc. That's probably unnecessary for a single page, but when designing a full-blown site, it's nice to have a wide variety of features handy.

As mentioned before, the big negatives for Dreamweaver are its cost and learning curve. It's almost certainly overkill for fairly simple designs, but if you want to do real commercial web development (and I want to at least look like I could), it's probably worth the price and the time required to learn how to use it. A bit like the space shuttle: it's got a ridiculous number of controls, and you wouldn't use one to go to the grocery store, but if you need to go to space, nothing else will do. Another advantage for Dreamweaver (again, this one admittedly applies to more hardcore users) is that it integrates with other Adobe programs like Photoshop and Illustrator.

Assignment 3

For this assignment we got a little practice writing our own HTML. Even if you want to work with mostly pre-made tools for your online presence, it's good to know at least a little HTML so you're not completely at the mercy of the tools you're using.

Confession time: this is not my first HTML rodeo. I actually had a GeoCities page back in my younger days, and I would suspect many people who first discovered the Web in the mid-90's can tell you about at least one freebie web page provider they worked with (Tripod and Angelfire are some others).

These sites typically provided simplified, graphically-based editors (known as WYSIWYG for "what you see is what you get") to help you create your pages. The main advantage of these editors was that they allowed you to get a page up quickly. The main disadvantage is that they didn't allow for much customization. Getting away from the WYSIWYG editors meant creating your own HTML in a no-frills text editor like Notepad (there were allegedly advanced HTML editors available at the time, but they were generally terrible).

HTML has changed somewhat since my first forays into web page creation. The biggest change I've noticed since then is the separation of content from presentation, or styling. Styling is usually handled now by some combination of JavaScript and CSS (Cascading Style Sheets), which were in embryonic stages in my GeoCities days. For a great illustration of how different stylesheets radically change the look of the same HTML file, take a look at CSS Zen Garden.

If you spend any time working with web content creation, you're almost certain to run into the limitations of pre-existing templates eventually. Knowing at least a little HTML (and probably some CSS, too, but that's outside the scope of this post) will help you know where to look when you need to customize a template to suit your needs or create a page from scratch.

If you want to be old-school about it (and there's nothing wrong with that!), check out the HTML Tutorial at W3Schools. It's pretty thorough, and you should probably bookmark it for reference purposes, if nothing else.

If you prefer a more hands-on, game-like style with lots of small challenges, check out Codecademy's HTML & CSS tutorial. It's actually part of a larger track where you learn more about web design, which is why CSS is included. Both this tutorial and the one from W3Schools are completely free, as are all the tutorials on both sites, so check them out!