Advanced New Media

Designing and building websites at the University of Wyoming

Adding a Resume and Achieving that “Wow Factor”

Adding a Resume

For the final website, you need the resume in both PDF and HTML versions. This means the resume should be downloadable by PDF and should be coded in HTML (or appear as an image). See classmate Olga’s resume page for a good example of how she met this criteria.

To embed the PDF, save your resume as a PDF file from Word (go to Save & Send –> Create PDF Document). Ensure you save it in the same folder as your website files. Then, in the HTML code, insert the PDF file as a link: <a href=”my_resume.pdf” target=”_blank”>Download my resume</a>.

To insert the resume as an image, open the Word document in Adobe Illustrator (or another editing program that can open .doc files). Go to File –> Save for Web & Devices –> Save as .jpg file in the same folder as your other website files. Then, in the HTML, insert the image element code: <img src=”my_resume.jpg” alt=”My resume as an image.”  border=”1px black solid”>.

If you have any trouble, please let me know.

Improving the Application of Design Principles

Many of you need to improve the professional look and feel of your website. You may have met the requirements for the final website, but you are missing the bonus “wow factor” that “A” websites possess. To meet the “wow factor” requirement for an “A”, you must apply design principles in a clean and professional manner. Let’s review the design principles before examining some example websites.

Here are a few student websites that have the wow factor and some that don’t.

Wow Factor Websites

  • Example 1: Uses simple repeating background image with a jello layout
  • Example 2: Simple color scheme with repeating background image and jello layout
  • Example 3: Simple color scheme, clean look with simple graphic and font

Websites That Lack The Wow Factor

  • Example 1: Poor color scheme, inconsistent font choice, and more problems
  • Example 2: Poor color scheme, but otherwise it is OK. See what a poor color scheme can do?
  • Example 3: Odd choice of fonts, poor color scheme, distracting and odd background image. Layout looks pretty good though.

Aiming for the Wow Factor: Adding a Simple Repeating Background Image

What is a simple repeating background image? Check out my personal website to see what I mean. Right-click to “view background image” andimg09 you’ll see that there is a simple rectangle that is set to repeat in my CSS. See the corresponding CSS code below:

#bodyindex { background: #DEDEDE url(images/img12.png) repeat-x left top; }

#bodypages { background: #DEDEDE url(images/img09.png) repeat-x left top; }

To explain: I created an index page that looked slightly different from the rest of the web pages, so it has its own division (#bodyindex, just for the index) and its own image (img12.png, just for the index page). The other web pages use the #bodypages division and the img09.png image. Notice that I’m only repeating it horizontally once (that is the “repeat-x left top” rule). Then, when the image is done repeating, it defaults to the background color of #DEDEDE (the light tan color).

To refresh your memory on the background selector options in CSS (such as background-repeat, background-position, etc), please see p. 380-383 in the textbook.

Aiming for the Wow Factor: Adding Rounded and Stylized Borders

Notice how my dropdown menus on my personal website have rounded edges. This effect looks professional and is easy to create using the border-radius property in CSS. See. p. 386-389 in the textbook for a refresher on how to create and style borders using CSS. In another example, classmate Hannah has applied a stylized border to her home page.

Aiming for the Wow Factor: Adding a Logo or Photo That’s Consistent Across Pages

On my personal website, you’ll notice that the home page has a larger photo with my name and the content pages have a cropped smaller version of the same photo. This creates visually consistency across pages.

Consider using a consistent image across your websites as well. For example, classmate Gabrielle has used a golf-related image for her golf-themed website.

Classmates Jordan and Olga have created logos that are used consistently across their websites.

To create a simple logo, go into Photoshop or another graphic design program and experiment with the text tool, shapes, and lines to create an original logo for your website. Simple is fine. It does not have to be fancy or complicated.

Photo Galleries & Slideshows

Photo Galleries

If you want to organize your photos in a gallery, then here are some options that I’ve created for you. Feel free to adapt this as you see fit.

Photo galleries are great for a large number of photos to display. If you only have a few photos to display, or want to display photos in a slideshow manner, see the section called Photo Slideshows below.

I will walk you through some of the major coding concepts. Otherwise, it’s up to you to play around with the HTML and CSS to adjust to your website. Please let me know if you have questions.

Example 1

Example 2

Example 3

Photo Slideshows

Dynamic photo slideshows are even more complicated than static photo galleries. Let’s skim over a tutorial to get an idea of what’s involved.

We can work through the key pieces of code that you need to understand in order to adapt the code for your own website.

Photo slideshows are great for less than than a dozen photos or so. If you’d like to showcase all of your photos on a webpage, then go with a photo gallery. If you want to highlight a few important photos on a home page or content page, then go with a short slideshow.

Note: The more photos you add, the more complicated the code gets and the more you’ll have to work to re-write the code to fit your needs.

Example 1: Automatic slideshow with no captions

Example 2: Automatic slideshow with captions and play/pause buttons, very complicated code

Example 3: Automatic slideshow with captions when you hover

Example 4: Automatic slideshow with captions all the time

You could also download the code from the first example we looked at and edit that code as well.

The Importance of the Printing Press: Snowy Range Academy, 1st Grade

What is the printing press?

  • What do you think a printing press would do?
  • First version developed in China 1,000 years ago.
  • Modern printing press was invented in Germany by Johannes Gutenberg in the 1400s (more than 600 years ago).
  • Printing presses had mechanical, movable metallic type (or letters). Ink was applied to the metal letters and then stamped on a blank page.

Model_of_The_Printing_Press.

Metal_movable_type

What did people do before the printing press?

  • There were scribes who had to write everything.
  • Do you think that scribes were faster or slower than printing presses? Why?
  • Do you think that a printing press made creating books faster or slower? Why?

mark-writing

What impacts did the printing press have on society?

  • More books were printed –> More people want to learn to read
  • More people reading –> More people want to learn to write
  • More people reading and writing –> More information, opinions, and ideas can spread and be shared with others
    • Example:
      • The most popular book was the Bible.
      • More people read the Bible by themselves instead of relying on a church.
      • A huge change in the Catholic Christian religion occurred because of this.
      • People who were Catholic started their own religion (Protestant Christianity), based on their own reading of the Bible.
  • More people reading and writing –> More inventions of other things, like electricity, trains, and cars
  • More people reading and writing /  More information and ideas –> Less reliance on authority and kings/queens for news and governance
  • Less reliance on authority and kings/queens –> Development of a democratic society where all people are equal

How did the printing press affect the American Revolution?

  • Why did the colonists in early America want to break free of England’s rule?
    • “Taxation without representation.”
    • Freedom of religion and democratic ideas
    • Any other reasons?
  • Who was Benjamin Franklin?
    • Franklin had a printing press. He was a publisher, or a printer.
    • He printed pamphlets, letters, newspapers, and opinions about the American Revolution.
    • Because he printed things about the Revolution, people were informed and knew what was happening.
    • His printing press helped the Revolution.

new-england-courant

  • Franklin also printed political cartoons. This was made from a woodcut. He cut the picture in wood and printed it.
  • This is “Join, or Die.” It’s a snake that is cut up and dying.
  • Franklin meant that South Carolina, North Carolina, Virginia, Maryland, Pennsylvania, New Jersey, New York, and New England should join together to fight England and become free. Or else, they will die and keep losing their freedoms.

join_or_die

Review

  1. How did the printing press work? Movable type (letters), ink, paper, machine…
  2. How did the printing press change the world? Reading, writing, information sharing, new ideas, new religion, less reliance on authority…
  3. Who had a printing press in the American Colonies? Ben Franklin
  4. What did Ben Franklin print? Pamphlets, newspapers, letters, opinions, stories, political cartoons…
  5. Did Ben Franklin’s printing press help the Revolution or hurt the Revolution?

Activity Time!

Objective: Show students how a printing press makes copies much faster, easier, and with less errors than a human can with handwriting.

Demonstration: I will come to class with a piece of cardboard that has a short sentence constructed with letter stamps. This is how a printing press worked. Then, I will take ink and spread it over the sentence. Next, I will push a piece of paper on the stamped sentence to show them how the ink transfers to paper. This is how copies were made quickly.

Instructions: I will tell students that they will have a turn at the printing press, but first, we need to see how long it takes to hand-write the same sentence four times.

  • Activity 1: Students will write the same sentence four times on their own piece of paper. I will time them. I will record the time when the first person is done, and I will record when the last person is done. I will calculate the average and put it on the board.
  • Activity 2: Students will get into groups of four. Each group will get a turn at the printing press at the front of the classroom. I will apply ink to the press. Then, each of the four students needs to make a copy of the sentence, so there are four copies of the same sentence. I will time the student groups.
  • Activity 3: I will compute the average group time for the printing press. We will compare that time to the average time it took to do the same four handwritten sentences.

Conclusion: Finally, I will emphasize that printing presses make writing much faster and provide more consistent copies. This ability to make many exact copies allows more books to be made, which makes more people want to learn to read books, which spreads information quickly, which allows people to think for themselves and take more control over their lives, such as wanting an American Revolution from the British crown.

In terms of materials:

  1. The students will need plain lined paper to hand-write their four sentences.
  2. I have plenty of cardboard, so no worries there.
  3. Do you have letter stamps that I could glue onto the cardboard to create a short sentence?
  4. Any suggestions about what the sentence should say?
  5. Also, I’ll need about 30 pieces of white construction paper for the students to use for the makeshift printing press.
  6. I’ll also need an ink pad and ink roller to apply the ink to the makeshift printing press.

The students can take home their handwritten and printing press copy of the sentence.

UW Public Debate on Marijuana Prohibition

The UW debate team is hosting a public debate event over marijuana prohibition and possible alternatives.  The event will consist of two parts.

  • First, there will be a short debate between students from the UW and Regis University (Denver) debate teams. Students will explore the causes and costs of prohibition and defend policy alternatives to the current system. There will be opportunities for public commentary and questions at the end of the debate.
  • Second, there will be a panel discussion from several experts.

Panelists are:

  • Professor Stephen Easton, professor of law and former dean, University of Wyoming College of Law.
  • Senator Chris Rothfuss, Wyoming Senate Minority Floor Leader, Laramie, Wyoming.
  • Jeffrey S. Pope, Associate at Holland and Hart, former Head of the Criminal Appeals Section of the Wyoming Attorney General’s office, Cheyenne, Wyoming.

Date & Time: April 30, 7 p.m.

Location: College of Business, Room 121

We are extremely lucky to have such an esteemed panel join us to provide follow-up commentary on the debate and the broader issues of the topic. Please consider joining us, as well as encouraging your students to attend. — Travis Cram, UW Debate Coach

Drop-Down Navigation & Appendix Top 7

Drop-down Menu

Drop-down menus can make navigating your website easier. I added a drop-down menu to my personal website.

In order to give you a cleaner version of the drop-down menu, we will examine the clean example on my website by first looking at the HTML and then look at the CSS.

The HTML is very simple. Let’s start there. Open a new notepad document and follow me.

You’ll see that the CSS is a little more complicated. Let’s copy and paste the CSS into a new notepad document.

  • We will break down the major components of the CSS file to understand what’s going on.
  • We will use our book’s Appendix section to learn more about the CSS once we’ve typed it in and done the example ourselves.
  • We will play around with the CSS code by deleting and altering rules in order to see what happens. –> This is a great way to learn what specific rules are doing in CSS!
  • If you need to use drop-down navigation, you will add the code to your website and adapt it as necessary. I will help you, if needed.

Also, don’t forget that I’ve added a new section of HTML & CSS Resources in our sidebar of links on our blog here.

Appendix Top 7

Appendix #1:  More CSS selectors (and the word-spacing  property)

Appendix #2:  Vendor (i.e., browser) specific CSS properties

Appendix #3: CSS transforms and transitions (we will do this example together)

Appendix #4: Interactivity (this is what JavaScript looks like)

Appendix #5: HTML5 APIs and web apps

Appendix #6: More on Web fonts

Appendix #7: Tools for creating web pages

Basics of SEO & Google Analytics

SEO: Search Engine Optimization

Before we get started: Search for your name again on several search engines. What happens? Do you see your website?

If you don’t see your website yet, then perhaps the search engine spiders need more time to find your content. Or, perhaps you should consider implementing some of the suggestions below that are relevant to SEO.

The purpose of SEO is to:

  • Create a great, seamless user experience.
  • Communicate to the search engines your intentions so they can recommend your website for relevant searches.

What Search Engines Are Looking For

Search engines strive to provide the most relevant results from a user’s search terms. Search engines consider:

  • Title Tags: The title tag is THE MOST IMPORTANT SINGLE TAG in your page. It tells the search engines what your page is about. It is still vitally important to your SEO strategy. If interested, see more information about the importance of title tags.
  • Content: Is determined by the text on the page and the titles and descriptions that are given. Also consider the use of helpful HTML5 elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer>. These elements give your content more meaning and help search engines.
  • Performance: How fast is your site and does it work properly?
  • Authority: Does your site link to authoritative and respectable sites (e.g., government websites, professional media websites)? Or do other authoritative sites use your website as a reference or cite the information that’s available?
  • User Experience: How does the site look? Is it easy to navigate around? Does it look safe? Does it have a high bounce rate?

This information was adapted from SEO Basics: 8 Essentials When Optimizing Your Site.

If you’d like to read a more comprehensive guide to SEO, see Google’s SEO guide, a 32-page PDF document.

Google Analytics

While a healthy SEO strategy gets visitors to your page, relevant and interesting content (and advertising) keeps them on your page. Google Analytics is a free system to help understand your audience and their content interaction.

Online content managers, website administrators, and social media marketers need to understand who is visiting their website, where visitors are coming from, and what content is most popular.

Knowing what content is popular, who is visiting your website, and where visitors are coming from will give you more information to share with potential advertisers and content creators.

Advertisers and content creators can create messages that resonate more with the audience, which will hopefully drive more traffic to your website.

Purpose of Google Analytics:

  • To track page visits from your audience.
  • To track audience demographics.
  • To track *where* your audience came from (e.g., a Google search, Facebook, another website)
  • And, it’s free to use.

Walk-Through of My Google Analytics Account

Before we sign up your website for Google Analytics, I’ll walk you through my account.

Key areas to examine:

  • Audience –> Overview
  • Behavior –> Overview

If you have a WordPress blog, you can also use a Google Analytics plugin to track your blog. I use Google Analyticator.

Example Job Description that Uses Google Analytics: Wyoming Public Media’s Website Coordinator Job Call

$41,400 minimum salary

Essential Duties

  • Produce high-quality original content for WPM’s internet and social media channels. Plan, design, develop, test, write/edit copy and documents. Utilize web-based software tools for managing web content.
  • Serve as liaison with NPR Digital and other public broadcasting e-media systems and services. Stay abreast of industry e-communication software tools, management techniques, and e-trends that increase usage. Understand and apply industry and FCC broadcast regulations.
  • Coordinate with WPM Engineering/Technology department in areas of mobile apps, streams, and analytics. Work with News and Programming/Production areas to maximize multi-platform dissemination of content.
  • Coordinate and implement marketing and promotional efforts through a variety of platforms. Design digitized images, banners, charts, e-newsletters, image maps and other graphics to enhance appearance of site, support management communication tools, and to increase overall e-traffic.
  • Plan and maintain social media activity and increase WPM’s social media presence, crowd-sourcing potential and two-way conversation with community interest groups.
  • Record, edit, compress, transcode audio and video for Web and mobile.
  • Provide technical troubleshooting and support for Web and mobile. Communicate with users to incorporate user needs, industry best practices, and correct problem situations.
  • Recommend equipment and software purchases that encourage content innovation and performance efficiency.

Minimum Qualifications

  • Bachelor’s level degree and two years of experience as a webmaster/content developer or equivalent combination of education and experience.
  • Working knowledge of public media industry initiatives in digital media.
  • Deep knowledge of industry e-communication software tools, management techniques, and e-trends that increase usage, including audio, video, and photos.
  • Understanding of industry and FCC broadcast regulations and regulations governing use of digital content.
  • Excellent communication skills across multiple platforms with strong writing and editing abilities.
  • Strong organizational skills and ability to produce content with quick turnaround.

Desired Qualifications

  • Ability to produce compelling original work for web and social media.
  • Ability to collaborate with colleagues and to take direction from supervisors.
  • Ability to multi-task and shift priorities as needed.
  • Deep knowledge of the NPR Digital system.

Guided Signup: Visit Google Analytics to get started. I will guide you through the process.

You should have a Google account to complete this activity. The purpose of this exercise is to understand how to set up a Google Analytics account and what Google Analytics does for you.

Key Points

  1. SEO should be a strategy that you thoughtfully create and implement on your website.
  2. Google Analytics is a free service that allows you to understand your audience and how your audience interacts with your website.
  3. If you plan on keeping your website in the long term, then you should implement the suggestions raised in this lecture, and also consider learning more about these strategies through your own research.
  4. You can certainly include this information on a resume (i.e., that you have basic understanding of SEO and Google Analytics).

Be prepared and be open to learning new skills relevant to SEO and website analytics. If you’re interested in a career in new media, then you need to be flexible, adaptable, and willing to learn new skills, services, and software.

Job Opening at Wyoming Tribune Eagle

A small daily newspaper with one of the top designs in America is accepting applications from a designer/copy editor to join our team. If you like designing pages with flair, the Wyoming Tribune Eagle wants to talk to you. Headline writing and copy editing are also part of the position. Web and social media skills are preferred as well; we are upgrading the digital side of our operation and are looking for someone who can help. This is a great entry-level opportunity or one for a more experienced person looking to make a move upward. The WTE, a seven-day a.m. Sunday circulation of 15,000, underwent a radical redesign in 2008 that takes advantage of one of the most technologically advanced presses in America. Cheyenne, Wyo., is located near the Snowy Range mountains at the northern tip of the Colorado Front Range. Our growing city is close to some of the best hunting, fishing, hiking, camping and other outdoor activity areas in our region. We’re also only about a 90-minute drive from Denver and 45 minutes from Fort Collins, Colo. Send a cover letter, resume and work samples to Mark Borgard, Assistant Managing Editor-Nights, Wyoming Tribune-Eagle, 702 W. Lincolnway, Cheyenne, WY 82001 or submit materials via e-mail at mborgard@wyomingnews.com. No calls please.

http://www.journalismjobs.com/job-listings/1544602

 

Take the Additional Website Features Survey

Take the survey “Additional Website Features Survey” on WyoCourses. Go to the “Quizzes” navigation tab and you’ll see the survey.

In brief:

  • I’m soliciting your feedback about the additional website features that you’d like to learn in class.
  • I’m also soliciting your feedback about how much in-class lab time that you’d like at the end of the semester: one week or two weeks.

Thank you for your feedback!

Romantic Relationships Study Extra Credit

There is one more extra credit opportunity for your participation in a research study. Please see the attached PDF.

In short, the study is about romantic relationships:

“We are interested in your romantic relationship stories either from:
(1) Participants in relationships that have some degree of romantic involvement or potential for involvement (i.e., currently involved in a dating relationship). If you are in a relationship, then you will need to bring your partner with you to the study; or
(2) Participants who have recently broken up with their romantic partner in the past 12 months (i.e., ended your dating relationship), then you will need to just bring yourself to the study.”

I will give 6 points of extra credit if you participate in the study as a single person and 12 points of extra credit if you participate as a couple.

“The process will take about 30 minutes for participants who are not currently in relationships (singles) and 60 minutes for those with relational partners (couples).”

All single participants’ stories will be collected Monday, April 6th – Sunday, April 12th. (See Page 3 in the PDF file). Please utilize this link for the study if you are a SINGLE – https://www.timetrade.com/book/9DD7K

All couple participants’ stories will be collected Sunday April 11th – Sunday, April 18th. (See Page 4 in the PDF file). Please utilize this link for the study if you are in a COUPLE – https://www.timetrade.com/book/VZ1G6

Updating to HTML5 Markup

Ch. 12, Modern HTML: HTML5 Markup

Monday and Wednesday

Download the correct HTML (right-click, view source, copy and paste code into Notepad, save as “blog.html”) and CSS file (click link, copy and paste code into Notepad, save as “starbuzz.css”) for this assignment

Why change from <divs> to HTML5 markup — pp. 545-547.

Updating the Starbuzz website to HTML5 (conceptual) — pp. 548-558.

Adding a blog to a web page — pp. 559-572.

Adding navigation to your website — pp. 573-577.

Adding video — pp. 578-593.

Embedding video with YouTube

Adding audio — p. 710

See the Starbuzz Blog with an mp4 video that autostarts.

See the Starbuzz Blog with multiple video sources that does not autostart and for an embedded audio file using HTML5.

Friday

Required attendance workday. Submit Assignment 6 – Website with CSS Formatting & Layout by 11:59 p.m.

 

« Older posts

© 2015 Advanced New Media

Theme by Anders NorenUp ↑