3DW DevTools – Page 18 – Application Development Cloud

Video aspect ratio standard sizes

Here is my post on the charts and information regarding video production and graphics sizes.

stuff to go through

all about the jQuery collection object. $("#about")this lets us dominate the dom so easily. any id on the page can be quickly and easily accessed and manipulated. to change a text box with id of “name” back ground color in your forms for an alert of missing info, $(“#name”).css(“background-color”,”red”);// access textbox id of “name” and change bg color to red and you can chain these together to dominate… $( this ).html(“Tap To Launch”).css(“font-size”, “x-large”).css(“font-family”, “fantasy”).attr(“alt”, “my alt text”) val is awesome.. get the value of a text field (and perhaps even more, got to check.) with $(“#name”).val() set the old getelementbyid….value=”my value” with $(“#name”).val(“my value”); add event to any element via id

$('#target').click(function() {
  alert('Handler for .click() called.');
});

here is a better way .. you can access the event vars e like flash as3

 $("#btnSave").click(function(e){         e.preventDefault();         alert("btnSave is clicked");         return false;         });

JQuery provides several ways of adding elements dynamically into an already existing element. Some methods are: before(), insertBefore() after(), insertAfter(), append, appendTo, prepend, prependTo and so on. f you want to change the current active page with JavaScript, you can use the changePage method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:

 //transition to the "about us" page with a slideup transition

 $.mobile.changePage( "about/us.html",

{ transition: "slideup"} );

//transition to the "search results" page, using data from a form with an ID of "search""

$.mobile.changePage( "searchresults.php", { type: "post", data: $("form#search").serialize() });

Heres a simple click called to div…Jquery is cool because you can put an event on any element with an id from static items that are not usually interactive like div , spans to standard active hot spots like buttons and links. function myAlertFunction( message ){ alert( message); } here is how you would call scripts after page loaded in jquery. $(document).ready(function(){ $(‘div’).click(function(){ myAlertFunction(‘ This is a div’); }) }); here is how you do it in jquery mobile, becuase pages are stored inthe dom of one html page.

$( document ).delegate("#aboutPage", "pageinit", function() { alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!'); });

you delelegate what page the scripts will be attached to via the id.

for linking web pages and changing page via script , in your function use the .attr() to add href, alt, titles – for those great tool tips. $( this ).attr(“href” , “http://celc.dwdenney.com/daycarerecordsforms.html”); this seems like good for image slide show, can read files from folder into array, then change src via timed intervals, use css animation to tint color fade in or opacity fades or some slide trannys

$("img").attr({   src: "/images/hat.gif",   title: "jQuery",   alt: "jQuery Logo" }); $("div").text($("img").attr("alt"));

this is a sweet way to transition an element.

Here is a good one for sending texts from your apps.< form name=”send_login_id_form” id=”send_login_id_form” method=”GET” action=”assets/devcloud_logic.php” data-ajax=”false”>< select name=”carrier” id=”carrier”>< option value=”verizon”>Verizon</option>< option value=”tmobile”>T-Mobile</option>< option value=”sprint”>Sprint</option>< option value=”att”>AT&T</option>< option value=”virgin”>Virgin Mobile</option>< /select>< label for=”to”>To:</label><input name=”to” type=”text” id=”to” size=”30″ />< label for=”message”>Message:</label><textarea name=”message” cols=”40″ rows=”5″ id=”message”></textarea>< input type=”submit” name=”submit” id=”submit_button” value=”Submit” />< input type=”hidden” id=”action” name=”action” value=”Submit message and phone number to recieve text pass code” />< /form>

fujitsu seems to have some good biometric authentication devices

Users: Device Authentication Better than Passwords

A new study indicates that most users would prefer to have their devices authenticated rather than deal with the complications of passwords.

By Larry Barrett | September 15, 2009 Share
The latest data protection and information security survey conducted by the independent Ponemon Institute suggests that consumers would be willing to let Big Brother encroach a bit on their individual computing devices in exchange for more online security and lot less memorization of pesky user names and passwords.

Of the 551 participants who responded the Traverse City, Mich.-based researcher’s online survey, 70 percent said they’d be willing to have their computers authenticated by an online merchant before purchases are completed and 75 percent of those surveyed said that computer authentication is preferred because it’s more convenient than remembering passwords or answering pre-selected questions.

According to a 2007 password study by Microsoft, the average person has 6.5 Web passwords, each of which is shared across almost four different Web site. The study also found that each user has about 25 accounts that require passwords and he or she types an average of eight passwords a day.

If this particular study and it’s relatively small sample size is indicative of how the majority of consumers feel, so-called device fingerprinting software and technology developed by the likes of Los Altos, Calif.-based ThreatMetrix will soon find a much larger market with e-tailers, online payment processors and even social networking and e-dating sites.

“Actually, I did find the responses a little surprising,” said Larry Ponemon, chairman and founder of the Ponemon Institute. “The responses were overwhelmingly positive and it’s clear people are becoming more comfortable with technology that can authenticate their machines.”

The idea of allowing a third-party Web site to use a software that would then report back the IP address, browser and physical location of a PC or mobile device still strikes some as an invasion of privacy. However, the notion of divulging personal information such as a mother’s maiden name or the last four numbers of a social security number apparently bothers Internet users even more.

In 2008, the Georgia Tech Information Security Center estimated that as many as 15 percent of personal computers were part of a botnet, up from 10 percent in 2007. E-commerce sites, dating sites such as eHarmony and Match.com as well as banks and payment processing centers are increasingly looking at device authentication technology as yet another tool in their ongoing war with hackers, spammers and other garden-variety malfeasants.

“The thing I’ve learned over a number of years is that timing is everything,” said Tom Grubb, vice president of marketing at ThreatMetrix. “I really feel like it’s the right time for this technology. It can help you identify who is a good guy and who is a bad guy without invading anyone’s privacy. The bad guys know that they have to try to act like a good guy and that leaves a trail that we recognize to help protect your network.”

In its report, the Ponemon Institute also found that 78 percent of users think online merchants, banks and social networks should use technology, such as a cookie or other invisible software, to protect consumers’ identities. Only 21 percent of those surveyed want online vendors to require more personal data from the consumers themselves.

According to CyberSource, 7 percent of e-tailers with more than $25 million in annual sales are using device fingerprinting software and another 47 percent said they plan to implement it by year’s end.

“What they’ve come to realize is that previous methods for authenticating credit card transactions and IDs are failing,” said Alisdair Faulkner, vice president of product development at ThreatMetrix. “This technology identifies the device and gives you another tool to use with other security technologies and processes to secure all these transactions.”

Article courtesy of InternetNews.com.

Cloud-aware Network Management Real-life case studies on how large enterprises moved away from traditional legacy tools to ManageEngine OpManager Enterprise Edition for cloud-aware network management experience. Click here to download the white paper.

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.

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.