Numiko Labs

Category: html

html5 under the radar; or a standards compliant way to embed video on the web

6:01 pm on July 2nd, 2009, by Ryan Gibson

With the release of Mozilla’s Firefox 3.5 another browser—along with Apple’s Safari and Google’s Chrome—now supports html5’s video tag. We’re still a long way from complete browser support, and a working standard. Ian Hickson, among other things, editor of the html5 spec lays the land out as follows:

“Apple refuses to implement Ogg Theora in Quicktime by default (as used by Safari), citing lack of hardware support and an uncertain patent landscape.

Google has implemented H.264 and Ogg Theora in Chrome, but cannot provide the H.264 codec license to third-party distributors of Chromium, and have indicated a belief that Ogg Theora’s quality-per-bit is not yet suitable for the volume handled by YouTube.

Opera refuses to implement H.264, citing the obscene cost of the relevant patent licenses.

Mozilla refuses to implement H.264, as they would not be able to obtain a license that covers their downstream distributors.

Microsoft has not commented on their intent to support <video> at all.”

So where does this leave us, still embedding video with the propriety Flash pluggin, well not exactly. Kroc Camen has a standards compliant, non-javascript alternative that takes advantage of html object-fallback. Yes the code is a little verbose, and adding non-native controls still requires javascript—but the concept seems sound and the extra work of compressing an Ogg Theora video is nothing to bork at.

This seems like a really cool way of allowing video for those without Flash, or unwilling to use Flash. I’d argue against it needing any attribution—as its a collection of html used in the expected way—although Kroc is the first to suggest this particular series of embeds.

Anyway, check it out and have fun with Video for Everyone.

2 comments » | flash, html, web

Minimal Form Markup

12:47 pm on January 30th, 2008, by Andy Tawse

You see a lot of form markup that uses extra DIVs to line things up. But mostly, I don’t find this necessary. Here’s how I usually do it:

<style>
.stdForm { width:300px; }
.stdForm label { float:left; width:100px; }
.stdForm input, .stdForm textarea { margin-bottom:5px; width:180px; }
.stdForm textarea { height:50px; }
.stdForm #send { display:block; width:auto; margin:10px 0 0 100px; }
</style>
</head>

<body>

<form class=”stdForm” method=”post”>

<label for=”fullname”>Name</label> <input type=”text” name=”fullname” id=”fullname”>
<label for=”email”>Email</label> <input type=”text” name=”email” id=”email”>
<label for=”phone”>Telephone</label> <input type=”text” name=”phone” id=”phone”>
<label for=”address”>Address</label> <textarea name=”address” id=”address”></textarea>
<label for=”postcode”>Postcode</label> <input type=”text” name=”postcode” id=”postcode”>
<label for=”comments”>Enter your comments </label><textarea name=”comments” id=”comments”></textarea>

<input type=”submit” value=”Send” id=”send” name=”send”>
</form>

The key is having the width on the form to keep labels and their corresponding fields lined up nicely. Of course there are always exceptions with complex forms but this works well in most situations.

4 comments » | html

firefox/flash @ ” swap bug

5:01 pm on November 9th, 2007, by Jeff Khan

if you’ve banged your ahead against a brick wall that your swf is swapping @ with ” in text fields..

wmode might be the problem.

When wmode is set to transparent specifically in Firefox, It will display @ as ” and ” as @ in input text fields.
Basically making you think your keyboard is set to the US style keyboard!

removing wmode or setting it to non transparent will solve this.

Credit to Andy H for finding this article:

http://blog.headlondon.com/archives/no-wmode-please-were-british/

Comment » | flash, html

Building Contribute-enabled sites

3:25 pm on May 22nd, 2007, by Andy Tawse

Basics

Based around Dreamweaver templates. Create “Editable regions” – the end-user can edit these.

Use “Repeating regions” e.g. http://www.ccdu.co.uk/news.htm for when users can add and remove similar areas.

Create editable regions within headings if you want to restrict the user to a certain style for that area (again see the repeating regions and the h1 and h2 tags in http://www.ccdu.co.uk/news.htm). Create editable regions with paragraph tags if you only want one paragraph.

The user can choose headings (h1 etc) in Contribute so provide styles for a number of these and advise which to use where.

As you develop, make sure the site is editable in Contribute. Sometimes it renders the site differently and editable areas become inaccessible. You can use design-time stylesheets (Dreamweaver, Text/CSS Styles/Design time) to apply styles only when editing in Contribute.

Use template parameters and expressions for more complex things e.g. hiding and showing areas of different pages, complex navigation. See http://www.adobe.com/devnet/dreamweaver/articles/template_parameters.html

Tip: when setting parameters don’t edit the source directly. Instead use in Dreamweaver use Modify/Template properties, otherwise changes don’t get reflected in the document.

Be prepared for anything the user might attempt to enter. For instance make sure links, lists, images etc. look OK in editable regions. Styles intended for other parts of the site may affect them.

Settings

You can change lots of useful settings once you have set the site up in Contribute in Edit/My Connections/Contribute. These options are useful for keeping the site clean and manageable.

First it asks you to choose the editing style – choose Dreamweaver-style (otherwise it will use <br>s instead of paragraphs). Then choose “Edit Role Settings”

Useful options in here are:

  • Editing – restrict what the user can do. Best to lock it down as much as possible. Choose “Only allow text editing and formatting”.
  • Styles and Fonts – usually best to set to “Document-level CSS” and to only allow “Include HTML heading styles”. Turn off “Allow users to apply fotns and sizes”, “Allow users to apply font color”.
  • New pages – for restricting what templates users can use to create new pages (if any)
  • File placement – quite important. Make it so that files (images etc) are stored in one place only. Change any option that says “placed next to web page”. Sites become unmanageable otherwise.

When you apply these settings they are stored in the mysterious _mm and _notes folders that Contribute creates. Don’t upload these to the live server – apply the setting once the site is already up there.

Comment » | contribute, development, html

HTML Emails

10:17 am on May 2nd, 2007, by Andy Tawse

When building HTML emails forget everything you know about modern, best practice HTML/CSS. Support for these is very limited and has taken a step backwards with Outlook 2007 (http://www.campaignmonitor.com/blog/archives/2007/01/the_truth_behind_the_outlook_2.html)

  • Use tables for any kind of complex layout.
  • Don’t use CSS positoning – Outlook 2007 doesn’t support it and emails can have text appended to the bottom (e.g. by email filtering software) that can overwrite what you’ve put in the email.
  • Use old-style presentational tags (e.g. font, b, align) or inline styles. Webmail tends to strip out any <style> tags and inline styles override any global styles that Hotmail or Gmail might have
  • Background images should be avoided or take into account that lots of people won’t see them
  • Test in as many email clients as you can
  • Keep it simple – forget about anything like Flash, JavaScript or forms
  • You can get round all this by using one big image, but this is more likely to be flagged as spam by filters
  • Remember if the email is going to consumers, they are more likely to have Outlook Express than Outlook that we use

Resources:

3 comments » | email, html

     

↑ Back to top