Application Development Cloud – Page 19 – Everything I need for multimedia production and application development anywhere on any device

Day of week selector

The Web Content Accessibility Guidelines were developed through a Milestones process by W3C in cooperation with individuals and organizations around the world.

They have published a set of standards that all public serving institutions must follow when providing content to users via the internet.

At Skagit Valley College I was asked by the Disability Coordinator to come up with a solution for selecting the days of the week from a control on a page of the web application.

I came up with this day of week selector that lets the user choose the days that they need. I am able to use the standard labels and ID names to enable screen readers and other accessibility software to describe the content to the user in a beneficial manner that they could easily understand and interact with.

The ui is just an unordered list with the days of week as id.

Then I added the ability to select them by manipulating the class with jquery using a click event handler…

// make a days of week choice selector
$(“#weekdays a”).on(“click”, function(event){
$( this ).toggleClass(“success”);

});

Then, to gather the info and submit with the form, I select the li’s with the class identifier, and add them to a form variable as so…

var weekdays=$(“.success”);
var the_weekdays=””;
weekdays.each(function(){
if(the_weekdays!==””){the_weekdays=the_weekdays+” , “;}
the_weekdays=the_weekdays+$( this ).attr(“id”);
});
$(“input[name=the_weekdays]”).val(the_weekdays);

I have even thrown in some code to put a comma between multiple days if selected. The string that is submitted with the form would look like this: Tuesday, Thursday

prepend zero to number

for use in a time display, I need to prepend a 0(zero) to the minutes less than ten.

Here is a function that will do that:

function pad(n) { 
if (n < 10) 
return "0" + n; 
return n; }

Detect Screen Resolution

Here is a handy tool I made for detecting the screen resolution of any device.

While testing and developing I used this tool on Ipad, IPhone, Blackberry Playbook, Samsung Galaxy, Kindle Fire Asus Transformer and it all worked perfectly to allow me to create the perfect content for each type of device.

http://losguerosproductions.com/screendetector.html

Send Email message with php and javascript

I have some good techniques to send stuff. One file demo is here http://losguerosproductions.com/emailme.php

build an object, and insert into dom using javascript and jquery

var div = document.getElementById("yourDivElement");var input = document.createElement("textarea");// this isgreat if you don't need to put contents into the text area dynamically.an empty text area. var button = document.createElement("button"); input.name = "post"; input.maxLength = "5000"; input.cols = "80"; input.rows = "40"; div.appendChild(input); //appendChild div.appendChild(button);

$('<tr>').append( $('<td>').append($('<a>', { href: o.link, text: o.word, onclick: function() {someFunc(o.string);}}) )

I have a list that I need to insert an new anchor with javascript(because you should always use native javascript when possible), and build its attributes using jquery.

To create the new anchor :

var myNewTag = document.createElement('a');

var mynewthingy=document.createElement(‘a’);
mynewthingy.setAttribute(“href”, “http://dwdenney.com”);
mynewcategory.innerText=”visit deedubs”;
$(“#mydomobject”).append(“<li id=’atempnameremovewhendone’></li>”);
var atempnameremovewhendone = document.getElementById(“atempnameremovewhendone”);
atempnameremovewhendone.appendChild(mynewthingy);

Lorem Ipsum Dummy Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Use an image’s alt text as a caption as well.

$(“div”).text($(“img”).attr(“alt”));

give an element a unique id based on its dom position

This is a very useful code to give a unique id.

$("div").attr("id", function (arr) {

return "div-id" + arr;

})

This will display the id.

.each(function () {

$("span", this).html("(ID = '<b>" + this.id + "</b>')");

});

Direct, Inverse and Joint Variation Equations

Direct variation is a variation equation , relating one variable to one or more others using multiplication and or division.

We can use this to solve for d in a distance rate time problem. d=rt

if the rate is going to be a constant when the other variables are changing, then :
distance varies directly as time and
the distance is directly proportional to time.

Examples: page 321 in text has lots more
In electronics, Resistance of wire varies directly as its length R=kL
In medicine, dosage is directly proportionate to weight of person d=kw

Joint Variation is when one quantity may vary directly as a product of two or more other quantities.

If a variable y varies jointly with variable x and z, then y=kxz where k is the constant of proportionality.

In geometry the area A of a triangle varies jointly as its base b and height h. A=kbh
If F varies jointly as H and G then F=kHG

Z varies jointly as W and Y . If Z=330 when W=11 and Y=10, find Z when W=60 and Y=10
First find the variation: The variation is Z=kWY.

Second find k using the first set of values 330=k(11)(10) | 330=k(110) | k=330/110 | k=3
Third solve for Z using the second set of values and the k you just found… Z=(3)(60)(10) | z=1800

Inverse variation is when one quantity increases as the other decreases and vice versa. y=k/x

We would use this in a distance rate time equation (d=r/t | t=d/r) when we were solving for t
T=k/r

For the weight of an astronaut problem, the weight W of an object varies inversely as the square of the distance d from the center of the earth.When w=111, d=3978 find k. It really helped me to leave the numbers unmultiplied

W=k/d^2

111=k/3978^2 | k=111(3978^2)

now find w when d=434+3978
w=111(3978^2)/(434+3978)^2
w=90.24

Combined variation is awesome..

T varies direclty as the square of D and inversly as F. The variation is : (T=kD^2)/F

The number of phone calls between two cities, N, varies directly as the populations (p1+p2) and inversly as distance between, d

The variation is N=kp1p2/d
If 69000 is N number of calls and d distance between cities is 340 and p1 p2=(40800)(230000) then find k

69000= k((40800)(230000))/340
69,000=27,600,000k
k=69000/27600000
k=.0025

how many calls, N, are made when d=455and p1p2=(70,000)(160,000) and k=.0025
N=kp1p2/d
N=.0025(70,000)(160,000)/455
N=612538 rounded to nearest integer

F=kq1q2/d^2
F=6 when q1=9 and q2=3 and d=3
6=k(9)(3)/3^2
3k=6
k=2

find f when q1=6 q2=4 and d=2
F=(2)(6)(4)/2^2
f=12

HTML5 vs Flash Animation

Here is my html5fun file

Here is one that I was messin with background colors to dominate the dom.

Here is the css gradients playground

The code is pretty straightforward. This solution to Flash is pretty lame to me. The Flash worked well in every device except the ipad, but now we have to code multiple file types for each audio or video we would wish to embed.

For example: where I would have made one flash movie to use everywhere, and maybe just skipped the I-audience, now I have to encode three html5 compatible files, as well as the flash player fallback. And honestly, the html5 versions just don’t function the same across platforms. We get a slightly different reaction in every browser, when the Flash one would be exactly the same everywhere it was displayed.

Here are screenshots from a demo I created. Its a small animation , with an audio sound effect that should play on page load. In firefox, the audio is non existent, and even the fallback error isn’t working.

In Internet explorer, the audio plays, but there is an ugly control bar, and the animation won’t play when you click it.

Research on Ipad and android devices coming soon.

Flash is the perfect way to create accents and highlight art and animations on your webpages. Lets start by making a logo for the top of my site here. I would like to have some cool looking text, with animated effects, just to add some spark to my page. Thats what I will go for , a “sparking text” type of effect. It needs to be 627X65. The width is the most important part, as the height will be relative. For this purpose, we are going to use text, with an outline, a gradient fill and a drop shadow.

Now we can try recreate a similar text effect using pure html5. Here is a test of Apple’s “Hype”, an HTML 5 authoring program for graphics and animation. Their answer to the “hype” that they feel flash is riding on. HTML is a text markup language. And it does a great job of marking up the text. you can have fonts, and italics. Trying to make this text markup language perform animations and add graphical effects such as drop shadow and opacity is not what it was made for.

Fire up flash. bust out some cool text. add some sparking effects on touch. export it out and put in a page. now lets test the page on several devices including pc, mac and mobile.

firefox on mac
ipad