How to Optimize Photos for Web

1. Open your photo in Photoshop

2. Open the VIEW tab at the top -> Proof Setup -> Internet Standard RGB

3. Open the IMAGE tab at the top ->Image Size :

Resolution: 72

Dimensions: longer side to 800 pixels

Resample Image: Bicubic Sharper (for reduction)

Bicubic Smoother (for enlargement)

4. Open the FILE tab at the top -> File Info -> Type in your information and descriptions. Remember to copyright yourself (option +G=©)

5. Open the FILE tab at the top -> Save for Web:

File: JPEG

Quality: Very High or Maximum

Optimized: Check

Preview: Internet Standard RGB

Image Size: longer side to 800 pixels
6. Save

 

Advertisements

To Download FTP Tool and Log In

Here is the link to download your FTP and VPN tools:

https://myservices.missouri.edu/Login.aspx

Type in your pawprint and password to log in, then search for FTP or VPN tools.

For the FTP tool to get to your Bengal space at home or anywhere else, MU is recommending Fetch for Mac users.
PC users can also download a windows version of Fetch.

 
After you downloaded and installed it, open it up, and there will be a window pop up.

Hostname: bengal.missouri.edu

Username: your pawprint

Connecting Using: SFTP

Password: your pawprint password

 

Hit connect, then you should be able to see your bengal space.

 

 

 

 

Bengal Server and .ogv files

So we have run into an additional issue with embedding video into our html5 pages.  The problem is that a .ogv file is not recognized as a video file by our school’s servers and if you load your page in firefox from the web (NOT locally, because it works fine locally), firefox will still not play your video and give a mime error.

If you are using bengal space, we have to tell the server that .ogv is a video filetype.  To do this we have to interact with the server by creating a disappearing file.  Disappearing, you might ask?  Yes.  Why?  Well, because servers are rather mysterious things.

So, here we go, (and please follow this exactly step-by-step):
1.  Connect to Bengal.
2.  Open TextWrangler and create a new file.
3.  Copy this code into TextWrangler:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba

AddType video/mp4 .mp4
AddType video/x-m4v .m4v

4.  Go File -> Save As and navigate the directory to the folder in your bengal space that has your html page for your video.

5.  Name the file .htaccess and click save.

6.  A warning that says “Names that begin with a dot “.” are reserved for the system.” will pop up.  Click on the Use “.” button.

7.  Reload your webpage (not locally) in firefox and your page should play fine now.

Video tag in HTML5

Alright, so we’ve made it through working with audio in html5 and have moved onto video.  Though we went over this in lab today, I figured it would be useful to have the code out there on our blog.

So video in html5 is handled much like audio.  In order to make as many browsers happy as possible, we need to create both a .mp4 and a .ogv copy of our video.  You can get a .mp4 straight out of Final Cut, just remember to watch file size.  For the .ogv file we use firefogg – one of the few free ways to get the .ogv we need.  Firefogg is a plugin for firefox and can be found at: http://www.firefogg.org/

Why is all of this necessary you may ask.  Basically, firefox (mozilla) uses the .ogg/.ogv because the codecs involved are open source and therefore has no copyrights, whereas Safari, IE 9+, Chrome, and Opera have opted for more widely used/accessible codecs which are copyrighted and therefore may not always be free to use.

Once you have both files (remember to watch file size), its time to create your video webpage.  Step 1: make sure your page is html5, this will not work if its not. Step 2: use the <video> tag and if you want the browser to include controls, use the controls attribute.  Step 3: point to your video with the source command and use the type attribute – it tells the browser which file to access.  It should look like this:

<video controls width=”videowidth” height=”videoheight”>

<source src=”videoname.ogv” type=”video/ogg” />
<source src=”videoname.mp4″ type=”video/mp4″ />

</video>

Favicon Icons

Alright, it is time for the long promised favicon walk-through.  So here we go:

Step 1. Design an icon.  Open Photoshop and create a new document.  Favicons are super small – in the browser they only show up as 16px by 16px, but if someone copies your link to their desktop, the icon will probably show up as a 48×48 or 57×57.  For that reason, I suggest an end goal of 57px by 57px.  However, designing at a 57×57 document is pretty hard because everything will be super blocky and pixilated.  300 x 300 is easier to design, BUT THE IMPORTANT PART – select a transparent background and 72 dpi (screen-size dots per inch)!

Step 2.  Re-size your icon.  In Photoshop, go Image -> Image Size.  Change the width/height to 57 pixels by 57 pixels.

Step 3.  Save your icon.  There are two different file types you can use: .png and .ico  There are pluses and minuses to both though.  .png works with nearly all browsers (EXCEPT Internet Explorer).  .ico works with ALL browsers but Photoshop cannot save as a .ico without a plugin.  There are many free/donation plugins but you have to download and install them which will allow you to save as an .ico.  Here is a link to one: http://www.telegraphics.com.au/sw/

Step 4:  Upload the file to your server and add in the code.  This code needs to go into the <head> section of your page (NOT the <header>).  Remember the <head> section is for things that are not inside the actual browser window (which is the <body> section).  The code is:

<link rel=”icon” type=”image/(filetype which is ico or png)” href=”(the file location on your server)” />

So an example would be:

<link rel=”icon” type=”image/png” href=”images/myicon.png” />

You will have to include this code in all of your html pages, so if you have different folders that html pages are in you will have to adjust your href file location.

There you go, have fun.

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>

HTML Document types and such

Hey all,
There have been a few repeated issues and confusion over the document types that you want to be using for your webpages. Remember, if you are using Dreamweaver, when you create a new page you have have to select HTML5 from the list.
If you don’t, Dreamweaver defaults to XHTML 1.0 Transitional.  What does this mean?  It means you will not be able to use all of the super-cool new html5 tags (like <nav> and <audio> and <video>) and your pages will throw fits with browsers where some may work but most will probably not.
So, this is what you want the top of every page to look like for HTML5:

<!DOCTYPE HTML>  <!--This is declaring an HTML5 page -->
<html>
<head>
<meta charset=”UTF-8″>    <!--Character encoding declaration-->
<link href=” (where ever your css page is located) ” rel=”stylesheet” type=”text/css”>

<title>Title goes here</title>
</head>

<!-- NOTHING goes here, in between the close of the head and the opening of the body -->

<body>

<!-- page content here -->

</body>
</html>

And what is the difference you may ask.  Here’s what the page looks link in XHTML 1.0 Transitional:

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

<head>
<!--Character encoding declaration-->
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<link href=” (where ever your css page is located) ” rel=”stylesheet” type=”text/css”>

<title>Title goes here!</title>

</head>

<!-- NOTHING goes here, in between the close of the head and the opening of the body -->

<body>

<!-- page content here -->

</body>
</html>

So there you go.  If you don’t see <!DOCTYPE HTML> at the top of your page you are not working in HTML5.

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.)