Student Blog Of the Week

It's time for Blog Of the Week! Students chosen for Blog Of the Week are rocking their e-Comm blog/portfolio in all three areas of Content, Voice, and Presentation (as shown here: eravens.blogspot.com/2014/12/what-makes-good-blog-post.html)

This week, the honor for the second-ever e-Comm BOW (Blog Of the Week) goes to Anna Gaiche.  Anna is a sophomore, currently focusing on Animation and Video. Check out her blog post on a project:

agaiche.blogspot.com/2014/12/ice-cream-yum.html

Anna describes the project, tells us the process and what she learned, and has some good graphics.  Her voice successfully achieves that balance between professional/technical and friendly/casual.  Anna uses CARP well by having contrasting headings, and space between sections.

Great job, Anna!

How to add a logo to your Blogger banner

My Blogger template doesn't have an option for a header logo, whatever will I do?

Use this simple CSS "hack" to insert your logo in the background of the header!

 

Before:

So, here's the header for this blog - the way it looked without our logo.

Uploading the image:

Our logo had not been used in any posts up to this point, so we made a new post, clicked the button to add an image (right of the Link button) and uploaded it.  This logo is white, with a transparent background, so it doesn't show on the white post background you see here. (We then saved this post, but didn't publish it.)

Grabbing the image's URL:

We clicked on the HTML button to see the code.  Yeah, it looks scary, but don't worry - it won't hurt you.
We located the image tag (it has img in it) and selected and copied the url of the image that we fount between the quotes.

Locating the applicable CSS:

In another browser tab (using Firefox or Chrome), we selected everything in our header, and chose Inspect Element.

We clicked up the list of code statements on the left, until we found the one that had the blue header background in it - figuring that this would also be the section where we should put the background image.  Looks like this div is in a class called .header-outer.

Hacking the CSS!:

Back in the other tab, we did Design > Template > Customize, then Advanced > Add CSS.

We pasted the URL of the logo image that we copied a few steps ago, just to have it here.

In the other tab, back in the CSS showing at the lower-right, we copied the .header-outer part.

Then we pasted that in front of the logo's url - and added in the rest of the CSS you see here.  Don't forget the starting and closing braces.

You can experiment with the other CSS rules for background and padding - these are just the settings that worked for our particular blog template.  Yours will be different.

After:

Once the preview shows it looking the way we want, we press the orange Apply to Blog button, and there we go!









Do you have a request for a Blogger How-To tutorial?  Comment below to let us know!

e-Comm Blog Of the Week

e-Communication is starting a new feature on this blog and on eravens.net, Blog Of the Week! Mostly these will be chosen from our e-Comm students in any of the focus areas.

This week, the honor for the first ever e-Comm BOW (Blog Of the Week) is Madison Hartquist.  Madison is a senior, focusing on Graphic Design. Check out her nice post on illustration design:

Mad Designs:  Copying a Master: Illustration Design

In this post, Madison reviews the work of some of the masters in the field of illustration. She also includes a section on how their work has impacted her, complete with her own examples - and even a tutorial. Her post is nicely formatted and organized, making it easy to read and understand.

Nice work, Madison - and congrats!!




Want to be featured as a future Blog Of the Week?  Students are nominated by their e-Comm teachers, so wow them with your projects and blog posts!

What is CARP?

It's an easy-to-remember way to make everything you do look great!

 

Contrast 

Make things that are supposed to be different really different! Look at the Contrast heading compared to these two lines of text. Contrast can be of size, color, weight, typeface, and more. The main purpose of contrast is to draw the eye to the things on the page that matter most.

Alignment

Align text on the left or right (rarely centered). These four sections are left-aligned, and they also line up with each other.  Left or right aligned text looks cleaner, and is easier to read. Try to make every element on a page line up with something else.

Repetition

Repeating elements unify a design and establish rhythm. The formatting of these four sections is repeated over and over. Repetition uses patterns to create a cohesive theme and establish order.

Proximity

Things that go together logically should be grouped together visually. These explanations follow each heading closely, with space before the next one. Other ways to group things use boxes, bullets, shading, etc., but there is always space between the groups.

Your turn! 

Can you find all the ways that Contrast, Alignment, Repetition, and Proximity were used?

What makes a good blog post?

As your e-Comm teachers have gotten used to blogging and having students blog, we've also been analyzing, discussing and refining what we think are the elements of a good blog post.

Tips from the blogosphere

This is not new ground, of course. Over in the right sidebar, you'll find links to sites that have specific tips for blogging. So far, they are:

• The Ultimate Guide to Starting a Design Blog
• 25 Blogging Tips for Newbies and Veterans
• The Ultimate Blogger Writing Guide

Let us know when you happen upon more helpful sites that we should list!

e-Communication's big three

Your e-Comm teachers have decided to evaluate your blog posts on three main things. We'll also be teaching each of these things more intentionally next semester:

• Content
• Writing Style (Voice)
• Presentation

Content:

This will vary, depending on the type of blog post you are doing -- from blogging about a current event to describing the process behind one of your projects. You will be informed of the expectations for each, as they come up. For example, if your blog post was about one of your projects, your content should successfully communicate the extent of the project, how it was done, what was learned, reflection and conclusions. You should also make links to relevant sites, and include graphics and video where appropriate.  If you don't have meaningful content, there's no point in anyone reading what you have to say!

Writing Style (voice):

Grammar and spelling matter. (Blogger has a spell-checker!) Use appropriate vocabulary (jargon or industry terminology appropriate to your focus area). Some of our posts in e-Comm will be rather technical. Others will be more abstract. So, the tone you take in your posts may depend a little on the nature of the content, and also on the preferences of your current teachers. But, by and large, your post should not read like a classroom assignment. Speak to your audience as a budding “creative” sharing your experience. “Blogging style” is a balance between conversational and professional. It isn't strict technical writing or research paper writing -- but, it isn't as casual as writing a letter to a friend. It's professional, yet engaging and personal enough to draw your reader in. 

Presentation:

Presentation is how your blog post looks. Use headings and sub-headings. Write your ideas in concise paragraphs, and include multi-media and links as evidence, appropriately placed and formatted. The typeface, size, and color of text should combine to make your text easy to read. Remember the design principles of CARP -- Contrast, Alignment, Repetition, Proximity (grouping). A great presentation is not only attractive -- it also makes your content easier to read and understand.

Content + Writing Style + Presentation

When you convey good content in an effective writing style and a well-designed presentation, you've created the perfect storm - a combustible mixture of elements that elevate your blogging to a new level. Your posts will earn higher grades, but much more importantly, your followers will want to read what you have to say, and you'll be honing those communication skills that will serve you well in your future endeavors!

One space or two between sentences?

On Blogger it's ONE.

Cutting to the chase...

In the one versus two space debate -- practically speaking, if you use two spaces between sentences in your Blogger pages or posts, they will sometimes wrap, causing some lines of continuing text to be indented by one space. So - for Blogger anyway, only use one space between sentences. (In Web design in general, multiple spaces are condensed down to one anyway, so it doesn't matter. For some reason Blogger is different, and it inserts a code to force as many spaces as you want.)

Here's an illustration of Blogger's two-space issue in the following paragraph. The sentences are all separated by two spaces:

The beginning of the 3rd line has alignment issues, due to my 2nd space.

The Debate (Blogger aside)

Is it actually wrong to use two spaces between sentences?

Yes. And... no.

It depends on who you talk to!  And, it depends on the setting.  (Are you typing a blog post, a letter, text for a poster, etc.?)  Believe it or not, it may also depend on the image you wish to convey of yourself.

Two spaces between sentences was the convention in the days of the mechanical typewriter, which had monospaced characters. It took two spaces after a period to give enough visual breathing room before the next sentence.

In the digital era, the two-space convention has lingered, even though it is not necessary (especially with those of us old enough to have learned to type on actual typewriters).

The Two-space Haters

www.cultofpedagogy.com/two-spaces-after-period/

These days, the convention is to use one space between sentences. There are those who interpret this very strictly, and insist that using two spaces is very wrong. They have some good points.

One is Jennifer Gonzalez at Cult of Pedagogy.





Farhad Manjoo puts it this way in his essay on Slate.com (Space Invaders):

Typing two spaces after a period is totally, completely, utterly, and inarguably wrong.

The Official Word for Writers

The Chicago Manual of Style and the MLA Handbook both concur that the current convention for most situations is to use one space after a period. They do, however, leave some wiggle room (www.mlahandbook.org/fragment/faq).

Publications in the United States today usually have the same spacing after a punctuation mark as between words on the same line. Since word processors make available the same fonts used by typesetters for printed works, many writers, influenced by the look of typeset publications, now leave only one space after a concluding punctuation mark. In addition, most publishers’ guidelines for preparing electronic manuscripts ask authors to type only the spaces that are to appear in print. 

Because it is increasingly common for papers and manuscripts to be prepared with a single space after all punctuation marks, this spacing is shown in the examples in the MLA Handbook and the MLA Style Manual. As a practical matter, however, there is nothing wrong with using two spaces after concluding punctuation marks unless an instructor or editor requests that you do otherwise.

For Graphic Designers and Desktop Publishers

Some graphic designers are among the strict one-space disciples. Others will tell you that what matters is readability - and if two spaces look more readable than one in a certain situation, then use two. Here are some of the ins and outs of the issue at desktoppub.about.com, including this reasonable recommendation:

The Bottom Line: Professional typesetters, designers, desktop publishers, and anyone who truly cares about fonts and typography should use only one space after a period or other ending punctuation. However, it doesn't necessarily need to be a standard space character. Desktop Publishing software makes it easy to experiment with other space characters to achieve the best appearance on a case-by-case basis. Save the double spaces for typewriting, casual email, term papers (if prescribed by the style guide you are using), or personal correspondence. Learn how to remove extra spaces between sentences. For everyone else, do whatever makes you feel good.

Your Spaces Give You Away

One final consideration - when applying for a job with a company that is inclined to want younger folks as employees, you may want to stick with the one-space rule in your cover letter and resume. Typing two spaces between sentences identifies you as someone who probably learned typing back when the convention was two spaces.

Check these out: Double Spacing After a Period Could Reveal Your Age and Nothing Says Over 40 Like Two Spaces after a Period!

My Problem (Mr. Olson)

I think that sometimes two spaces after sentences makes text more readable. However, I do want to change over to using just one -- on Blogger, I have to. There's a slight problem though....

9th Grade Typing Class, 1976

Spacing twice after sentences is a very difficult habit to unlearn. It was drilled into us repeatedly in 9th-grade typing class. Every period I have ever typed at the end of a sentence in the 38 years since then has been followed by two spaces. It's hard-wired into my brain and my muscle memory. You'll likely see evidence of that in many of my Blogger posts!

I have to concentrate really hard to make myself hit the space bar only once after a period. So, if you see me twitching slightly or making funny faces as I'm typing, you know why!

Making Portfolio Pages

Pages?  We don't need no stinking pages!

Badges?
We don't need no stinking badges!

(Name that movie.)  Well, yes, we do need pages. So far on Blogger, you've been primarily making use of posts. Posts are the most common way to update a blog. They appear on your home blog page, and with time they get pushed down and off the main page by more current posts. Pages are more of a static entity. They stay put, and they are accessible by name from a menu on your site. You can put as much or as little on a page as you like - and you can add to them or edit them over time.

We will use pages to make sections of your blog site that function more as a portfolio than a blog. This way, no matter how many posts you make, your best work will be right there available for those who want to see it.

Reading through this entire post BEFORE starting setup of your portfolio pages will probably save you some work - a couple of different options are shown, and you can pick the ones that work best for your portfolio pages.

a blog POST about a project

A Project Blog POST

So far, you've been blogging about some of your class projects, using posts. They have looked something like this example post about a project. This happens to be a photo, but imagine your animation, video, graphic design, or website design in its place.

This is a great way to blog about a project - but if this is one of your top portfolio pieces, you really want to also have it in a more featured location, where it won't get buried over time. If you labeled this post well, someone could find it that way - but they'd still have to wade through your labels. 

A Project Blog PAGE

So, let's see a couple of other ways we can feature your best work using pages.

In your design menu, go to Pages, and then press the New page button at the top.

Name your page - Graphics, Animations, Video, Web Sites - whatever. You can always rename it later.

Make a heading on the page, and put your cursor under that and press the Insert Image button.

Choose Upload

Choose Files, and select the files you want to upload.

Then click the ones you want to put the thick blue select border around them, and then press the blue Add selected button.

Give your work a caption and float it right or left, as space permits. Make it a large enough size that it can be appreciated.

Write your page content according to the requirements given by your teacher.

Then press the Publish button.

And.... nothing happens.

That's because pages aren't blog posts - they come up by choosing them from a menu, as opposed to being displayed sequentially on your home page.



So....

Now you need to go to your Gadgets in the layout menu, and scroll down to find the Pages gadget. Click the plus to add it.

This Pages gadget is basically a Pages Menu gadget.

Page names are on the left, and will only appear in the menu if you have their boxes checked.

Once the pages are checked, you may reorder them on the right side.  By convention, you should either place the Home page first or last.

You may want to name your Pages gadget Portfolio, instead of pages. I wish I would have thought of that earlier when I was making these screen captures...

Press Save when finished.

You may either position your Pages menu in one of the sidebar gadget spots, or...

... in a gadget at the top, in which case it looks like either a menu bar or tabs.

So, here's the finished page, accessible by the Pages Menu over at the right. 

The next really amazing project to put on this page later on would either go below or above this one on the page.

One thing about that - it's going to become a long page.  This is good if it is one feature project, or maybe two - but for any more than that, you may want to try yet another option....

For multiple projects on the portfolio page, you could just give an initial summary of each project, followed by a link to see more - either in a post dedicated to that full project, or another page.

Then just put this gallery page in your menu, and take out from the menu other pages that have the details on individual projects. If they are posts, just link to them.

(You can try an example of what I mean by going to the actual Graphics Gallery page on this blog.)

Upon Further Review

Definitely name your pages menu Portfolio, or something to that effect, instead of pages.

I don't want to go back and redo all the above graphics, but doesn't this look better? -->

With links to portfolio pages featuring your best work right there at the top of your blog, your projects are more likely to be seen and appreciated over time than if they were only posted.

You can keep on posting them - but having a gallery page with an overview of each project, linking to the more detailed posts about the projects, will help focus a reader in on your best stuff.

Here's another quick reference from Blogger on some of the details of pages and the pages widget that were not covered above: Blogger Buzz