RSS, +1s, Likes, and Tweets. Oh my!

Alright, so for our lab this week, we are going to walk through adding multiple networking/social media things into our sites.  I’ve got several links for you, so I thought this might be the best place for them.

Google +1: http://www.google.com/webmasters/+1/button/

Facebook Like: http://developers.facebook.com/docs/reference/plugins/like/#

Twitter Tweet: http://twitter.com/about/resources/tweetbutton

And one example of an RSS generator for your site:  http://www.feedmashup.com/

The three social media site buttons will take you to a page where you select settings and options, and then spits out some code for you to place in your page where you want it.  The RSS generator is a bit more setup heavy, and there are many sites out there that will allow you to customize your RSS and spit it out add-free for a price.  But for class demonstration purposes, I wanted to show one to you and like the social media sites, this one spits out code for an RSS button on your page too.

Google Analytics & HTML/CSS Validate

Google Analytics:

http://www.google.com/analytics/

Help page:

http://www.google.com/support/analytics/bin/static.py?page=guide.cs&guide=19779&topic=19783

For definitions of terms search them here:

http://www.google.com/support/analytics/

Validate Code:

html:     http://validator.w3.org/

css:    http://jigsaw.w3.org/css-validator/

Perfectly proper

After going through the first assignment, I wanted to give you a few pointers:

Example of a perfect img src:

<img src=”_MG_5013_web.jpg”  width=”800″ height=”533″ alt=”The streets of San Cristobal.”/>

Order inside doesn’t matter but remember to open and close everything and everything in the img src needs “…”

Secondly, coding structure:

<head>

*Think of the head has formatting and preparing your webpage but NOT what goes near the top of your actual page*

<title>Title goes here and is what appears at the top of the browser window</title>

</head>

*Nothing should be between the head and body, this is no-man’s land and things here are just floating*

<body>

*THIS is where your actual page begins.  This is what actually appears within the browser window.  Everything at the top goes first in the body, everything at the bottom goes last*

</body>

Play/Pause toggle buttons!

Classes are over, but I got asked by quite a few people how to make a button that would toggle between  play and pause. Since I just had to make one, I figured I’d post up how I did it here.

1) After you’ve created the play and pause buttons for your flv playback (see previous post), create a new movie clip (Insert –> New Symbol). I named mine pp_btn.

2) Inside this clip, put one button on each frame. If your movie autostarts, put the pause button on frame 1 and the play button on frame 2; if it doesn’t, put the play button on frame 1.

3) Create a new layer called “actions.” Insert a keyframe on both frames 1 and 2, and put a stop action on each.

4) Select the first button. Inside your on(release) action for that button, add the line: gotoAndPlay (2). Now, select the second button. Inside your on(release) action for that button, add the line: gotoAndPlay (1).

Example script from a pause button placed on frame one:

on (release) {
_root.myVideo.pause();
gotoAndPlay (2);
}

5) Go into your library and find the new movie clip. Drag it to the stage and test it. Now, your button should toggle!

Making your own controls for flv playback

The skins that come with the FLVPlayback Component are workable, but sometimes you want something a little more attractive. If you’re wanting to make your video and your soundslides component look consistent, you can use some simple ActionScript (2) to control your video.

1) Put the FLVPlayback component on the stage. Give the file path as you usually would, but tell the component that you don’t want any skins.

2) Give the component an instance name (in this example, we’re using the name: myVideo). You can name it whatever you want, as long as you use the same name (case sensitive) and you don’t repeat names within the project.

3) Just make a play and stop button like you usually would (or use the play and stop buttons from your soundslides) and then put this code on them:

For the play button:

on (release) {
_root.myVideo.play();
}

And for the stop button:

on (release) {
_root.myVideo.stop();
}

4) Go ahead and try it out!

HOW IT WORKS    When the user clicks on the button, the player/browser is told to look for the instance name of the component in the root folder in your library (_root). Then the play or stop action is associated with only the objects with that instance name.

Have fun!

CSS reset

A CSS Reset overrides all of the browser’s default settings for html tags and attributes.  This best way to guarantee consistency in appearance across browsers. Internet explorer will still cause issues, but it will make much less of a difference. Paste this into the beginning of your css document (under the character encoding and css declaration):

/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}

/* remember to define focus styles! */
:focus {
        outline: 0;
}
/* End CSS reset */

Usability

Steve Krug is a major name in usability and usability testing.  He’s written a number of books on the subject. If you can get a hold of it, you should really check out his book Don’t Make Me Think.

Here are a couple of lessons from the book that will be useful to you when thinking about site layout and design.
http://www.uxbooth.com/blog/10-usability-lessons-from-steve-krug%E2%80%99s-dont-make-me-think/

Also, check out this site. It’s a good resource on usability and user’s interactions with sites: http://websitetips.com/usability/

Doctype declaration

Every html page should start with a doctype declaration. It’s what explains to the browser which version of html you’re typing in. Your page won’t validate if you don’t have this.

We’re teaching you to use xhtml transitional. This is a more flexible version of the updated html language. You can also code in strict, but, as the name implies, it’s much less forgiving. Copy and paste this into the top of your document before the html tag:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

Dreamweaver will insert this for you when you open a new html document–just make sure that you have html transitional selected.

 

 

Doctype is only one of the elements that the validator requires you to have in an html document. It’s all already there when you create a new document in Dreamweaver. Otherwise, here’s what you’ll need:

You’ll need to add the xmlns attribute to the html tag. This is basically an absolute link that informs the browser which xml namespace is associated with your document. It’s an xhtml thing:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

 

The meta tag isn’t required, but it helps the browser determine what kind of character encoding to use. This tag goes in the head section along with your title:

<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
</head>

Resources: html tags and validation

This is a really helpful collection of tutorials on xhtml coding, start from the beginning or pick a skill you want to learn: http://w3schools.com/html/default.asp

At the bottom left of this page is a comprehensive list of all valid html tags and attributes (remember, tags are enclosed in carrots and sandwich what they describe (<b>bold text</b>) and attributes describe the tags (<body bgcolor=”#cccccc”>). The attributes associated with each tag are listed below it. You’re going to be using the standard attributes. If an attribute is listed as depreciated, don’t use it; there’s a better option. Event attributes are mainly used in behavior-based languages like JavaScript, so don’t worry about them.

Don’t style your html pages using html! It’s possible but it’s not good practice, so just disregard those sections. You’ll be learning how to make your websites look pretty in about a week.

Here’s the link to the w3 consortium’s html validator: http://validator.w3.org/. Some common errors that won’t validate:

all html tags are lower case: <H1>  or <EM> will not validate, rather use <h1> or <em>

all html tags must close: <p></p> or <img />

tags have to sandwich: <b><i>text </i></b>; not <b><i> text </b></i>

image tags won’t validate without an alt attribute: <img alt=”wonderful description here” />

Let’s talk Bengal Space

When connecting to the server, the address is “smb://bengal.missouri.edu”. In the dialogue box, make sure that you type in “tigers\pawprint”. After you sign in, you’ll be able to see the your bengal space in the finder window. You can use this space for storage, but anything you want to post online needs to be put in the “www” folder. At this stage, it’s just like moving documents between any other folders or drives on your computer–just drag and drop. If you used relative links everything should work fine.

When you’re turning in the index.html page, make sure that you’re posting a web url to blackboard, not a local file path. What’s the difference you ask?

A local url starts with “file:///…..”

Your bengal space url should be something akin to “http://web.missouri.edu/~yourpawprint/index.html&#8221;

Good luck and DON’T FORGET TO VALIDATE!

-Meg