Category Archives: resources

html5 Audio embedding

Ok. So, here is the long awaited audio embedding post. Because html5 is still in the development/implementation stage there are a few things that are still not standardized thoroughly. Audio is one of these. As is video, but that comes in the next few weeks. What does this mean? Basically we have to jump through some hoops to make all (or, as many as possible) browsers happy.

Things that make things unhappy:
1. Embedding a .wav file – this makes your user unhappy because they have to wait for your 40mb audio file to buffer. Don’t do this. Just don’t do it.Record in wav – great, edit in wave cool, just don’t use the wav in your site.
2. Embedding only an .mp3 – this makes Firefox browsers unhappy because it won’t work correctly all the time.
3. Embedding only an .ogg – this makes chrome and safari unhappy because it won’t work correctly all the time.

So the hoop we must jump through to keep as many happy as possible is to export both an .mp3 and an .ogg of the audio story and embed both. Whichever browser in use will automatically select the one that it likes and all will be great rejoicing.

Here’s how we do that in html5 (and you must make it an html5 page for this work this way):

<!DOCTYPE HTML>     <!-- declaring this an html5 page (see previous post) -->
<html>

<head>
<meta charset=”utf-8″>
<title>Page title here!</title>
</head>

<body>
<audio controls>    <!-- html5 command, controls places the player and then you reference the audio files through <source src=”(file location)” -->
<!-- Firefox will not play mp3  -->
<source src=”(file location)” type=”audio/mp3″ />
<!-- Safari and Chrome will not play .ogg -->
<source src=”(file location)” type=”audio/ogg” />
<!-- By having both file types embedded here you cover all browsers, just like video -->
</audio>

</body>
</html>

CSS Reset, Re-post

Just so it’s at the top, I re-posted the CSS Reset for you.  Copy and past it into the top of your css and you will be golden.

 
/* 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 */

Adobe Demos

Hey all, I hope your Thanksgiving break is off to a restful and relaxing start.  For those of you out there that are anxious to continue working, or are just dieing to do some coding or flash work over break remember Adobe offers 30 day trials of most all of their software including Dreamweaver and Flash which would run you through the end of the semester.  So sign up, download, and have a great break!

Try it out:  http://www.adobe.com/downloads/

Final Cut Pro X keyboard shortcuts

Here’s a link to a blog that has posted some shortcuts for use in Pro X.  Some of the keyboard shortcuts are the same, others are not.  But take a look: http://www.premiumbeat.com/blog/the-big-cheat-sheet-of-final-cut-pro-x-shortcuts/

Of particular note “s” and “shift” + ” s” turn on and off the scrubbing as you role over all the clips (“s” disables both video and audio scrubbing, “shift s” disables the audio scrubbing but keeps the video scrubbing functioning.)

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/

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” />