Friday, July 24, 2009

Grids

great article on grids and site about grids - with a free grid file for a 946x610px setup

massive resource article on everything grids

also - somewhere there was great resources for 960px grids - find that again. Basically best width for a website is 960px as that divides well into a grid. 

this was one
grid previewer / calculator
quick rundown for the web of grid design

Excellent grid designer app
Grid Designer - BAM! plug in your values and adjust until you find something harmonious and easy to divide by, play around easily with different columns etc, find the next size up from the grid you have if something needs enlarging, it does the maths for you!
I just used it to find a great grid for 800x600 I'll use in the future:
Columns:6
Pixels(wide):800px
Gutters:10px
Margins:30px
Makes columns 115px wide each - all divisible by 5!! 
a baseline grid of 10px would work really well here... 

horizontal grid increments happen at: 115px, 240px, 365px, 490px, 615px, 740px. 

What I found is its better to have a grid of 12 columns, so that you can use it for 3 or 4 column designs / pages. ideally - you want it divisible into 3rds and 4ths both horizontally and vertically. (if your using a fixed height and width design). 

OMG it also does typography - this should be your first stop for getting the right text sizes and layout when designing a new site and its going to have multiple columns anf you want to do the basline grid 'compose to a vertical rhythem' thing. looks like you can also export the css...

Templates - Cheap options for the stingey client

Static HTML and CSS templates from $1
http://www.onedollartemplates.com/

Template club, join and download all themes for the price of what one usually costs, nice typography already setup, just add images and branding colours.. 

Friday, July 10, 2009

Good list of questions to ask a client before starting a website job

Good list of basic questions to shoot over to a client to answer about their new website here:
http://www.evotech.net/blog/2009/04/22-web-client-ued-questions/

Tuesday, July 7, 2009

The latest info about fonts and typography for the web, sifR and embedded web fonts

Embedded Web Fonts using @font-face 

This in 2007

A post about @font-face by Jon Tangerine in 2008
Contains links to resources for fonts you can use on the web for browsers that support embedded fonts (my safari 3 shows them, not ffox 3)

If @font-face is the answer what I'm looking for is a font similiar to helvetica neue thin, this might work - museo sans the lightest version. 

also search here for something its a list of fonts specifically allowing @font-face embedding. Annoyingly the list dosn't show pictures but links to outside pages. 

an example of font face embedding

Sort of Web Safe CSS Fonts not commonly used (2008)

What else?
SifR...? ............. to be continued

Monday, July 6, 2009

Forcing a browser to NOT CACHE a file - so your updates show up for returning visitors

http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/

but you have to update every pages source code... ? just as easy as renaming file. might be other options in comments.

caching the proper way - http headers... 

apparently things included by server side includes arent ever cached? could be wrong. 

again suggesting http headers - and using no robots for google old pages 

Thursday, July 2, 2009

All about flash video - data rate, keyframes, frame rate etc

DATA RATES - what is best?

http://www.communitymx.com/content/article.cfm?page=4&cid=EBD77

They are talking about the old flash, but recommend not setting video data rate to

• Keep the video data rate below 275 kbps.

• Make audio mono and 64kbps unless it sounds shit.

Maybe this is outdated, because at flashcomguru, they refer to 500kbps like this
Encoded at a mere 500bkit/sec this demonstrates just how well the H.264 codec can perform at low bitrates.
So implied is that 500kbps is a low bitrate these days...
its looks pretty slick full screen see this demo

I just did Flash 8 High Quality (max rate 700kbps)
This is probably too high... but it looks really really good on my local preview...

but from a site I just read (no date on their posts though;
We use 272kbps/544kbps/1088kbps for low/medium/high quality video respectively.
This sounds sensible.

Heres a cool bitrate CALCULATOR!! the holy grail!!!
so its recommending me for a 460kbps video, that users will need a 600kbps connection.

so i look at my local broadband provider and the plan i am on (ADSL2+) runs at 24,000kbps. They say its 3 times faster than old broadband so guess that was about 8000kbps. So even the old broadband was fast enough by a factor of 10.
What gives? Why worry then? Sure my video is only 320x180
Even if I test the 1024x576 at best quality - it recommends a video br of 3932kbps - or a user connection speed of 4910kbps. Thats a massive video and it still is only a bit over half the old broadband speed. AND this is in Australia where the internet is controlled by dinosaurs and heaps slower than in Europe. There must be some other factor, like file size/hosting download limits, that would make you not want to post up a 4000kbps full screen video. I am seeing now why they were calling 500kbps a low speed above. And Flashes Hi quality default setting is 700kbps. Not that fast it seems

So conclusion is that about 700kbps should be fine/ pretty good looking for a 320x180, maybe even overkill 400 looks pretty ok also.
It seems to get trickier as frame size increases, more tradoffs must be made. 640x360 'action trailer' wants 1500kbps.

On the JW media player forum there is this advice for stuttering video which makes me think not to go over 800kbps uploading to a server with unknown speed (probably cheap /shared hosting). So around 700 I think is good.
Your server delivers at approximately 850kbps.
Your FLV requires approximately 1700kbps (combined video/audio/overhead).
Therefore, the player consumes the media data twice as fast as it is delivered.
Accompanying that - a table of best video frame sizes, apparently for encoders to do the best job, only certain frame sizes should be used, those that are multiples of 16 see the link for the table

Some general settings someone uses for encoding flash video.

adobe about video encoder CS3 custom settings

A WHOLE BLOG about flash, and this link purely on news about flash & video, esp h.264

a flash video encoding wizards website


amazing bit of code adds a video smoothening function - like antialiasing, so its less blocky, especially if its been downsized dramatically.


This is a pretty extensive article to brush up on or learn about flash video in Flash CS3, and video in general too.

massive list of articles on all things video - can search by program, conversion type and so on.

New full screen mode available in fp9 link to keep.

Video encoder settings comparison testsuite - many setting to choose from -

here a ppt presso with main steps of encoding but not the details

Heres a good walkthough of encoding issues and flash video encoder. It was written in 2006 so I think their talk of 400kbps being too high is a bit dated.

OK so starting now to develop a video encoding checklist i wonder if any else has one. It would include
deinterlacing
resizing video only to a multiple of 16
keeping the correct aspect ratio when resizing
adding smoothening script in flash
proper bitrate/fps/keyframe spacing for the type of footage
starting with best possible quality file using a non lossy codec (eg animation codec)
use on2vp6 or h.264 if your future minded

theres also some thing you need to do to h.264 quicktimes to make them 'fast start'. the fast start option box should always be ticked when its available and your doing internet videos.
http://renaun.com/blog/2007/08/22/234/

also just read somewhere that using the smoothening script in flash can be too much for older computers, they arent fast enough or something, can make the video play jumpy.

This from adobe flash video encoder cs3 help


If a video clip is longer than 10 minutes, the audio will drift noticeably out of sync if you do not adhere to the 29.97 fps rate or an accurate even division for lower frame rates (such as 14.98 fps, which is half of 29.97).


If your video clip is encoded with a higher data rate, a lower frame rate can improve playback on lower-end computers. For example, if you are compressing a talking-head video clip with little motion, cutting the frame rate in half might save only 20% of the data rate. However, if you are compressing high-motion video, reducing the frame rate has a much greater effect on the data rate.


Alternative Encoders

To get the best encoding - 2 pass VBR encoding is the way to go. Flash CS3 encoder apparently dosn't do 2 pass encoding. im guessing that this means the other encoders will be much better with fast movement.


If I was doing alot of this sort of thing, the Flix Pro looks great, and they have a whole package that includes players to output to, so it could be a neat end to end thing, better encoding and better players.


Good article but dated on the differences of the 3rd party encoders. Sorrenson has a better batcher but this was written in 2006 flix might be better now.

http://www.adobe.com/devnet/flash/articles/selecting_video_encoder_02.html


And heres a comparison page that will show you the difference between the 3 main encoders, Flash Video Encoder, Sorrenson Squeeze, and Flix Pro. It is down at the moment though.

http://www.flashvideofaq.com/


Flix Pro $249

http://www.on2.com/index.php?365

* Two pass encoding

* On2 VP6-S for High Definition (HD) output

* Hollywood-like "green screen" special effects

* Cool usability features, such as cue points and batch encoding

* Automatically output Flash Players for your video

* Output an HTML page to play your video with a click of the mouse



Sorrenson Squeeze

The other good one, has a cool feature called 'watch folder' where it encodes anything you put into a folder without opening the batch window. I can imagine this as a really satisfying feature. It offers 2:1 and 3:1 frame rates so it automatically does your frame rate for you at logical settings for lowering the frame rate.


Video Transcoders, Encoders, Rippers, Fixers, etc

When setting up a new computer heres the goods to install for video work.

Handbrake 
Has that cocktail logo - Good for getting things off DVDs and transcoding. 
http://handbrake.fr

VLC
Plays videos that quicktime balks at, transcodes, play weird internet videos, is pretty magic to have. VLC is needed to make Handbrake work. 

MPEG Streamclip
Kickass for fixing and transcoding wacky video formats that just aren't working. 


Tricks 
(open package contents right click)

Wednesday, July 1, 2009

Conclusion Flash Video and video playlists and so on

Conclusion is that a Flash video/media gallery/playlist with the goodness of SWFObject or Jquery Media ready to go dosn't exist.

This thumbnails menu jquery plugin. 
 if you dont mind adding in the flash object/embed / whatever tags by hand, (havn't tested this) dont know how this would work with flash detection, fallback content and so on... (the example uses youtube referenced videos dosn't show how to use it with embedded videos and all the options/ problems those create.) 

Someone should make a mashup. 

Good options then are:
Wimpy Rave - paid video player and playlist functionality. They also make nice mp3 music players. Skinable I think. Not too expensive. 

I've used wimpy wasp before, it locks your licence to a certain domain name registration which is a bit scary but its cheap (about $30AU i think) only drawbacks... the player controls' skin back then was not nice looking, too pc ish, and I dont think it was skinnable. BUT it did provide a very good way to utilise popups, (not modal/lightbox) and not have to make a new html page for each new popup... = fast updating for adding new files. And files are listed as simple links, no worrying about object/embed tags and all that messy stuff. Easy to update and read and copy paste in the future... 

Shadowbox
A lightbox style dialog box that can take flash, other videos, pics etc. good for consistency. $20 for a dev to use it on multiple sites. 
BUT their flash video flv example uses JW player to play the flash video... so maybe your going to need em both... ? don't know if it can be used without JW player that would be another question/ test to do. 


ALSO - there is more than one issue that all these plugins and so on are dealing with.

ISSUE 1:
flvs dont just play in the browser, like quicktimes, they need a player installed on the hosting site. A player can be made in Flash if you have it. (A player is the control bar with buttons etc). Or you can use players like wimpy, jw player and so on. 

ISSUE 2: Flash content if you arent streaming from youtube, vimeo etc, needs to be embedded in the page. There seems to be no exactly right code to do this but a whole heap of bugs and some nearly right code to do it that uses javascript. 

ISSUE 3:
You need to add browser/player detection script to make sure users have the right version of flash player installed to be looking at your content. 

So its all a big drag really. 

JW Player... 
39 pounds is like $100 AU - TOO MUCH!!

Flowplayer
$95USD for 1 domain!! too expensive!!

FLVPlayerPro
Provides an all Flash interface for video playlists. Snappy scrolling of the playlist thumbnails. XML playlist for the videos. $59.95USD for non streaming version. Has a referral program. 

This looks ok too

I dont know what these players do that Wimpy dosn't - but wimpy is cheaper. 

Flash Video About SWFObject 2 script and Flash embedding methods

At a glance it seems SWFOBJECT is a standard and popular way to embed flv or any swf into a web page, and includes flash version detection, and a link to update the Flash Player if they don't have the required player, all in the script. 

Im guessing this is a free script for people who want to embed swfs but dont have dreamweaver to do it? OR maybe dreamweavers method perhaps is inadequate or outdated or something and this is like a replacement...?? Maybe CS4 has a similiar way now. I do trust the open source method more than the Adobe software because these are usually most up to date with web standards etc. 

Ummm - I see this nested object embed method everywhere, but SWFObject 2s wiki is showing a conditional comments method I hav't seen in use before... it was updated June 11 2009 - so whatever they have written is much more freshly minted than my Dreamweaver version (CS3) or other methods out there. Think this is the way to go... 

Flash detection using SWF object 2 - tutorial...
It looks to include this nice app that writes the code for you "SWFObject Generator"!

A video version - but this looks like it is going to be for Sifr - dynamic flash replacement of fonts, which must use a related method of dynamic embedding... makes sense really... 

SWFObjects official wiki and code download

If your testing Flash Players versions and installation over and over again
Use the Adobe uninstaller!

ALA's article for a primer on Flash embedding methods - its 2007 so bit outdated, seems SWFObject2 has sorted out all the issues?? hope so... 

A learning guide for flash video if your using CS4

Flash video - adobes resources- eg dw to embed or making flash custom players etc

resources for video on the web. 

videos on flash video topics - for quicker learning. good intro here "for the flash phobic" on your options for using flash video in dreamweaver. 

flash sepcific learning guide

flash video templates list, some explained further below, for video playlists, video galleries etc (built in flash it looks like)

Presenting video with the Flash video component in Dreamweaver CS3
tutorial on how to insert flvs using dreamweaver - havn't checked forums etc to see if this is really a professional way to do it. it whacks some js into the page aswell. if it was this easy why would there be so much fuss on the net about how to best embed flash? (except that this requires the expensive software)

Interesting tutorial for making a video showcase. It dosnt show a demo but im guessing it is about a showreel one after the other type thing. 

Flash video template: Dynamic video playlist (AS3.0)
This is a pretty neat all in one solution to a flash video gallery, using an xml playlist. What I was looking for jquery to do to my videos galleria style. This is an all flash version, even for the scrollbar to scroll the preview thumbnails. 
It looks like a decent solution if you do have flash, and dont mind using all flash for the whole 'video interface' part of your page. at least you will get flashes ok looking scrollbar doing this and not an ugly browser scrollbar or have to use another jquery plugin for a nice looking scrollbar. 
It is a tutorial / template for both streaming and progressive delivery. 
It does irk me that the whole interface is in Flash, like what if you wanted to change the size of the interface or video you'll need to edit in flash. 
I want a solution like this visually for flvs playlist with scrolling capabilities but done in standards complaint XHTML list of links as a source for easier maintaining. 

Flash video and audio players for websites listing

lists major ones, 

Making a poster frame for a flash video flv or h.264

umm... if you want h.264 or even if you don't heres an easy way to make a poster frame, bandwidth detection script AND embed code AND serve iphone ready video. I havn't tested it. But  if you have Quicktime Player Pro (you need to buy it), (mines 7.6.2). (See picture below) You get these options when going file > export for web!!! It also says it makes a detection script that detects which connections speed/ type they are on and serves the correct video... AND the embed code to embed it with!!! this is pretty amazing... Try it out it looks decent. 























Using as3 and an flv and flash this tutorial BELOW. (note: as3 can only publish to Flash Player 9 - so if you want to target updateophobes, maybe not the answer. also note, if your going to have to publish to flash player 9 to get the poster frame.... why not use h.264 which can? be played in flash player 9 and as above makes the poster frame right out of quicktime.... anyway check the tutorial below. 

http://monkeyflash.com/tutorials/poster-frame-for-flash-video/

also check out this flash video full screen tutorial

or really quick version via creative cow...
A simple solution will be to include your poster frame in the first frame of your video. That way you can do a fade out or a transition when the user click play. 

Or you can add a still of your video to your first frame in your swf and a play button to go to the next frame where the flv will be.
 
Another option that quick and dirty:

 is to buy a player that creates a poster frame as part of its functionality and features. This sounds cool. FlashDen seems to have players people have made with features like this, worth a try and heaps cheaper than 3 hrs googling or jw player. Quick way to get more custom looking control bar without making it yourself aswell.

heres the actual preview page:
Concerns: The control bar leave 2 lines when it disappears over the video - not good!
when fullscreen is enabled, the controlbar stays in the same place rather than stretching which is a bit weird, but i doubt id use full screen anyway. 
Other than that it has a slick youtube vibe, HAS VIDEO SMOOTHENING SCRIPTED IN, a poster frame, a progress bar and loading gif, and is really cheap $12!

He's got another one
This one dosn't leave stripes over your video. 
A disadvantage is that the controlbar dosnt disappear when you move outside the flash file (like dws import flv does). It only disappears when you move away from the control bar but still on the video. maybe dw uses js to do that, but it just seems like the hiding isnt going to work all the time, i needs to hide when your over the surrounding html, like the flash vid component does. 

heres a slick looking one for AS2
Its all black default, which suits the look of the thing im working on an i think future things....  has a pro looking controlbar, and it dosn't hide, which im starting to think is a good thing, because if its hidden, then it dosnt look as much like a video. The buffering video flashing message is a bit annoying. Its not XML. 

This weird sound issue makes me want to not use as2 but as3 - just incase the sound is shit in as2, and someone happens to have that exact version of fp. as2 dosnt like mp3 playback above 44khz... i dont know how that relates to my 64kbps audio in my flvs... is it just an mp3 standalone thing or does it affect mp3 sound in flvs? i assume it does since it was in the forum about the video player above... 
This bug has been fixed as of Flash Player version 10.0.22.87

To publish to flash player 9 or not?? i hate having to update plugins, but.... to get a decent player...

heres a massive list of players both as2 and as3. These are all like $10 and whip ass over jw player in my opinion if you have flash.