Category: 3DW DevTools

Google Web Fonts

An exciting addition to web development arsenal is the Google Web Fonts api. The problem with fonts onthe web was that many computers dont have the same fonts, as they vary from system to system. http://www.google.com/webfonts

Elaborate on this, do some demos and release the post.

 

They say to start by choosing some fonts to add to a collection, then you dl the files.

The interface for choosing fonts is great. you can sort and filter the fonts depending on what you need for your project.Then you add them to a collection with the touch of a button.

Serifs, the tiny decorations on the tips of the letters, usually dont work well on screens, so they dont get used on webpages as often as sans. I am going to build a collection of serif fonts that look good onthe screen, so I can use them on some pages.

Well after i finished building a collection, they say that using too many will impact page load times. You should only choose the one or two you want for your web page.There is a cool web page load time meter that will show you if you have chosen too many fonts.So, I uncheck ed the boxes until i was left with my favorite two fonts, and they don’t have a huge impact on load  time.

Then, just add this link to your document  <link href=’http://fonts.googleapis.com/css?family=Metamorphous|Cagliostro’ rel=’stylesheet’ type=’text/css’>

Lastly, just add the font to a style statement like this example:

Example:

h1 { font-family: ‘Metamorphous’, Arial, serif; font-weight: 400; }

Add closed caption, subtitles and transcripts to youtube videos

I need to add some captioning to some videos. Here is the beef, from the docs at the tube.

A caption file contains both the text and information about when each line of text should be displayed.

A transcript file, on the other hand, just contains the text of what was said in the video. If the video’s in English, Spanish, Japanese or Korean, YouTube can use speech processing algorithms to determine when the words in a transcript should be displayed

 

In order to download auto-captions for a video, you must be the video owner. If this is true:

An .sbv file is just a text file with timecode information. You can use it in a caption tool, or you can open it with a regular text editor.

  • Sign into your account
  • On the Captions and Subtitles pane, look for the track called English: Machine Transcription. Click the Download button next to that track.
  • YouTube will then save a file called captions.sbv to your desktop.

To add captions or subtitles to one of your videos, you’ll need to have transcript or caption files with the captions/subtitles in them. A transcript file must be saved as a plain text file without any special characters like smartquotes or emdashes.

YouTube uses experimental speech recognition technology to provide automatic timing for your English transcript. Automatic timing creates a caption file that you can download. Short videos with good sound quality and clear spoken English synchronize best.

Here are some other things you can do to help get the best automatic timing results for your transcripts:

  • Identify long pauses (3 seconds or longer) or music in the transcript with a double line break.
  • Use double line breaks anytime you want to force a caption break.

Here are some common captioning practice that help readability:

  • Descriptions inside square brackets like [music] or [laughter] can help people with hearing disabilities to understand what is happening in your video.
  • You can also add tags like >> at the beginning of a new line to identify speakers or change of speaker.
  • Once you have the files, log into your YouTube account to upload them and:
    1. Mouse over your username located in the upper right corner of every page.
    2. Click Video Manager. You will then be directed to a page showing your uploaded videos.
    3. Find the video to which you’d like to add captions/subtitles and click the down arrow located to the right of the Edit and Insight buttons. Select the Captions and Subtitles button from the drop down menu.
    4. Click the Add New Captions or Transcript button on the right hand side of the page. You will be prompted to Browse for a file to upload.
    5. Select a caption/subtitle or transcript file to upload. If you are uploading a transcript (no timecodes), select Transcript file, otherwise, select Caption file.
    6. Select the appropriate language. If you wish, you can also enter a track name.
    7. Click the Upload File button.

Creating a single-use required response interactive form

Vote Registration Prompt

I need to make a 1 time use required interactive prompt.  part of web assistant duties state compliance issue.

This will require..

content container.

Place the content into a div container. Give it a unique id, and set it’s  display:none.

<div  id=”myprompt”  style=”display:none” >Here is my exciting and important content. It needs your response.This will interrupt your user flow until you respond.</div>

This is in mysvc.asp

external styling.

I make a custom style for the div container give it a good location, and  to make it look important. Style the top, left, width, height, borders text  and background to match the theme.

This is a style defined  in mysvcdb.css as promptstyle.

interactive response form.

This is the content for the prompt. It is a question that needs a response, the best use for a web form, no? Make a standard web form for now. In the content container in mysvc.asp

Asp  form capture logic.

This will be the logic to capture the user response to the form. you can use your flavor of server side languages. Im using classic asp here. Benjy whipped this up and i made a few changes

The file is votereg.asp

Javascript Logic

to Show and hide the content based on the user interaction.

Storage of user interaction results

So no repeat. Could use  user request.cookie…dom storage … User preference database storage.

Logic to check user compliance to requirements at login.

check cookie or db storage for compliance.

Changing an objects class to create functionality and cool effects

There are some great uses for changing an objects class via script. One of them is form elements. To create a better user experience, and guide them through the form, we can change the elements based on classes to show, hide and highlight the path way for the user.

To add a class to an element:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

document.getElementById("MyElement").className =    document.getElementById("MyElement").className.replace       ( /(?:^|s)MyClass(?!S)/g , '' ) /* code wrapped for readability - above is all one statement */

To do that in an onclick event:

<script type="text/javascript">     function changeClass()     {         // code examples from above     } </script> ... <button onclick="changeClass()">My Button</button>

 

Better yet, use a framework (in this example jQuery) which allows you to do the following:

$j('#MyElement').addClass('MyClass'); $j('#MyElement').removeClass('MyClass'); $j('#MyElement').toggleClass('MyClass');

And also:

<script type="text/javascript">     function changeClass()     {         // code examples from above     }     $j(':button:contains(My Button)').click(changeClass); </script> ... <button>My Button</button>

working with checkboxes and radio buttons

Here is a good way to get the info from checkboxes. make sure to give them all the same name, just different values. Then wrap the checkboxes in a div container with an id.In this case #c_b is a div wrapped around the checkboxes and #t is the id of a text box im using to display the results.

function updateTextArea() {
var allVals = [];
$(‘#c_b :checked’).each(function() {
allVals.push($(this).val());
});
$(‘#t’).val(allVals);
}
$(function() {
$(‘#c_b input’).click(updateTextArea);
updateTextArea();
});

 

After you have these values, of what boxes are checked, we can save the state of the checked boxes using cookies, so that the user will not have to check the boxes again when they use them…

[code]

…
$(‘#t’).val(allVals);
setCookie(“responsible_parties_choice”,allVals,”30″);
…

[/code]

To read the cookie and set the checkboxes use the code…
[code]
// look for checked box choices in cookie, then re check them
var thecheckedchoices = getCookie(“responsible_parties_choice”).split(‘,’);

for (choice in thecheckedchoices) {
//console.log(“im in there with the cookie data of ..” + thecheckedchoices[choice]);
$(“input:checkbox[value=” + thecheckedchoices[choice] + “]”).prop(‘checked’, true);
}
[/code]

 

Radio Buttons can be extremely tricky. First thing to remember is to group them using a “name” attribute.

Then they can be selected and manipulated as a group.

$("input[type='radio'][name='commencementattendanceoption']").on("change", function(){
alert($( this ).val())
});

Now I need to validate that one of them has been chosen.This will require some serious stuff. I need an include to validate things, to work with my content display system.

 

A good way to get  a comma-separated list of checkbox IDs:

$( ":checkbox" )
.map(function() {
return this.id;
})
.get()
.join();
The result of this call is the string, "two,four,six,eight".

Timed Text XML File Template

Here is a file template for creating closed captioning / subtitles for flash video.