Posts filed under 'DHTML'
1. What techniques can a web designer use to optimize and debug Flash created web sites? Feel free to share any other tips that you found during your research that may be of value to creating animated web sites in Flash.
“Trace” statements are likely the most known debugging tool used for actionScript code. You can place a trace statement anywhere you want and have it output just about anything you want also.
trace(”I’m a trace action!”);
myTrace = “I’m the content of a variable”;
trace(myTrace);
You can similarly use a text object you’ve placed directly on the stage to monitor during run time. You’ll only need to set something similar to: debug.text = myStringVariable;
Flash has an integrated debugger that is very powerful. To activate the
debugger, you need to go into Control > Debug Movie. You will see
the usual Test Movie setup but with an additional window aptly titled
‘Debugger’.
If you’re anything like me, you might use adobe’s liveDocs on line. I suppose it’s a debugging tool also. I plug in search criteria based on the error I’ve been delivered or the process I’m trying to complete. I also use forums and threads to help solve problems. I haven’t yet posted anything yet however.
http://www.actionscript.org/resources/articles/63/1/Common-Errors-and-Debugging/Page1.html
2. What is accessibility and why is it important? What should a web designer keep in mind when designing a web site to maintain accessibility? How does accessibility effect a web site’s animation?
Accessibility is an approach to web design that aims to ensure the widest access to the content and features of a website. The term is often used to refer to accessibility for people with disabilities, particularly blindness. … www.monash.edu.au/staff/web/glossary.html
Tim Berners-Lee, W3C director and inventor of the World Wide Web, defines it as access by everyone, regardless of disability. Even though the World Wide Web is continuously growing, many users:
• use speech browsers or “eyes busy”/”hands busy”, as businessmen in cars;
• don’t have the latest graphical browsers and plug-ins;
• surf with slow modems, or reside in rural or remote areas with limited access to the Internet;
• browse without graphics, using text-only browsers or subscribe to non-graphic services;
• access in noisy, high- or low-light environments;
There are also many users with disabilities as;
• Visual – blind, low vision, color blind;
• Auditory – deaf, hard of hearing;
• Motor/physical – paraplegic;
• Cognitive/learning – dyslexic, learning disabled.
• They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
• They may have difficulty reading or comprehending text.
• They may not have or be able to use a keyboard or mouse.
• They may have a text-only screen, a small screen, or a slow Internet connection.
• They may not speak or understand fluently the language in which the document is written.
• They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
• They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.
Accessibility increases benefits for both parties: the User and the Web site Provider. It may also persuade developers to take in some alternate considerations. They may be more likely to use stronger contrasting colors or, web safe colors, abstain from flashing screens or quick moving objects and use simpler navigation.
http://www.w3.org/TR/WCAG10/
http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_animatedimages.hcsp
http://www.webnauts.net/accessibility.html
September 20th, 2008
According to the msdn website, “Transitions are time-varying filters that affect how a change of content is displayed.” Basically this means that a transition is the same as other events, but instead of an instantaneous change of state, it happens over a specified period of time. Mostly, we see transitions used during slide shows containing different images. These are usually a wipe, or fades; a screen slide from right to left or left to right or a fade in and out. An interpage transition is a transition that affects the entire window as the window loads and/or unloads. This can be the same type of fade as the slide show.
In my opinion a lot of the web site trends are revolutionary and based on the latest technology. With a new software product and capability, something old becomes new again. The concept of most web sites is “attraction”. The owner of the site wants you to view their site. Transitions may or may not keep our ADD intellects amused long enough to hang out longer than 10 seconds. I think I read the average web page can expect a visitor to make up his mind about leaving the site at about 4 seconds.
What do I think about the growing trend of using transitions? Well, depending on their use, I think there is great potential for transitions. I like to think that transitions can be used for wonderfully interesting visual explanations for complicated or convoluted processes; for example this one showing how our bodies use energy and the resultant free radicals are bounced down the electron transfer chain to O2 in the process of oxidative phosphorylation: http://www.brookscole.com/chemistry_d/templates/student_resources/shared_resources/animations/oxidative/oxidativephosphorylation.html
Transition trends are pretty cool; some are so cool they’ll stick around for over a week. If you only want to show off your new skills and your transition does not enhance or contribute to the value or message of your site (determined by the visitor) then you’re likely to come to your senses or latch on to the next super coolness.
http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html
http://www.webpagesthatsuck.com/topic60.htm
http://msdn.microsoft.com/en-us/library/ms532847.aspx
http://www.webdevelopersjournal.com/wacky/transitions/transitions.html
http://www.xeogen.com/
http://www.adobe.com/devnet/flash/articles/animation_guide_13.html
http://tutorials.learnflash.com/tutorials/flash/bettertransitionss.html
http://www.adobe.com/devnet/flash/articles/creating_animation_as3_02.html
The page located here: http://www.jumpeyecomponents.com/Flash-Components/Transition-Effects/MovieClip-Transition-Effects-V3-45/
has a graphic that transitions from one image to the next.
AS 2.0 thread on transitions: http://forums.creativecow.net/thread/190/862393
http://www.robertpenner.com/presentations/rpenner_Animation_Workflows_in_Flash_CS3_FITC_2007.pdf
sliding door transition: http://www.swishzone.com/index.php?area=resources&tab=movies&do=page&action=detailed&link_id=598
September 15th, 2008
What type of information is important to understand before using audio/video on your web site?
It is important to know that all the technologies that have successfully managed video and audio over the internet use packet streaming. All video-streaming systems perform buffering. And, the four companies dictating what can be done with video are, Microsoft, Apple, Macromedia (purchased by Adobe) and RealNetworks.
One web site that contains audio/video:
http://www.msnbc.msn.com/ “Breaking News, Weather, Business, Health, Entertainment, Sports, Politics, Travel, Science, Technology, Local, US & World News – msnbc.com”
This is a 24-hour news channel featuring stories and video from NBC News, and The New York Times, Newsweek and the Washington Post. When watching video http://www.msnbc.msn.com/id/21134540/vp/26523861#26523861 you are able to select your next video even as you are watching another video. The videos will also continuously play through the video catalogue.
The benefit of audio/video and its use for information for the clients and the users? The original concept of this website and company was to have video on the web related to the stories on cable t.v. This continues to be the concept and with new technologies (silverlight) the clarity and capabilities are increasing. This company succeeds due to the audio/video content and the clients and users expect quality a/v content.
Reference:>
http://www.webopedia.com/DidYouKnow/Computer_Science/2005/digital_audio_formats.asp
http://www.peachpit.com/articles/article.aspx?p=388273&seqNum=2
http://www.real.com/
http://en.wikipedia.org/wiki/Macromedia
http://en.wikipedia.org/wiki/Msnbc
September 3rd, 2008
To determine what information is important for interactive forms you must understand the goal of the form. What is the information needed? Also, what information do you want the user to know? Depending on the types of information you will have the user submit will determine the fields you will use in the form.
The basic essentials are these: For text and numeric data you will use text and combo boxes. If you provide the information for the user to select, you may choose from radio buttons, lists, or combo boxes. Of course, you may want the user to select multiple options. The use of check boxes or list boxes will work nicely for multiple options. The use of buttons is a no-brainer. Whether it is text or looks like a button, you will use buttons to interact with the user to open files, play sound, movies, or submitting or clearing form data.
Have you thought about security and/or validation? You might consider using digital signature to verify the user’s identity and form validation is the process of checking a form’s values against a standard of expected values. It is a way to proofread or spell check what your user has entered as input. An example would be an expected 9 number combination and the user entered an email address. This would return as invalid content. Typically checked are empty fields, valid and well formed email addresses, dates, and the aforementioned a number entered in a text expected field (or vice-verse). If the tested field contains the expected input then the result is returned true and the form data is expected to be good data. It is important to use validation for online forms to add an extra bit of reliability and save time by ensuring a certain level of quality.
References:
http://validator.w3.org/about.html
http://www.w3schools.com/js/js_form_validation.asp
2007 CivicPlus website management conference, “Next Generation Government Websites”
August 29th, 2008
Control is what most expect when navigating the web. Users of menus should feel like they know where they are and where they’re going to go. Interactive websites benefit from menus and navigation by allowing the user to feel confident they are at the right location and where to go next. Menus and navigation allow the user to browse in sequence, randomness or in circles and still have a sense they are within the same domain.
Menus and navigation serve beneficial to the user by allowing the user to initially land on any page and be able to continue without breaking stride. Too often I have landed on a page and wondered how I could manipulate the URL in the address bar to get to another page within the same domain. In this scenario a clear menu structure would serve very beneficial. http://amazon.com is a fine example as well as my reference, webstyleguide.com.
Reference:
http://webstyleguide.com/interface/user-centered.html
August 22nd, 2008
Associated Press. 2000. The Associated Press stylebook and briefing on media law. Cambridge, Mass.: Perseus.
Hale, Constance, and Jessie Scanlon. 1999. Wired style: Principles of English usage in the digital age. New York: Broadway Books.
Krug, Steve. 2001. Don’t make me think! A common sense approach to Web usability. Indianapolis, Ind.: Que.
Microsoft Corporation. 1995. The Microsoft manual of style for technical publications. Redmond, Wash.: Microsoft Press.
Mullen, R. 1998. The HTML 4 programmer’s reference: All platforms. Research Triangle Park, N.C.: Ventana Press.
New York Times. 1999. The New York Times manual of style and usage. New York: Times Books.
Nielsen, Jakob. 1995. The alertbox: Current issues in Web usability. http://www.useit.com/alertbox.
———. 1999. Designing Web usability: The practice of simplicity. Indianapolis, Ind.: New Riders.
Strunk, Jr., William, and E. B. White. 2000. The elements of style, 4th ed. New York: Macmillan.
Zinsser, William. 1998. On writing well: An informal guide to writing nonfiction. 6th ed. New York: HarperReference.
August 20th, 2008
http://www.scottrade.com/switch/?id=1#
This opens a Scottrade “Switch” page. Their content=”If you’re tired of brokerage account and transfer fees, make the switch to Scottrade online brokerage. We’ll not only help you consolidate your stock trading, IRA and mutual fund accounts, we’ll give you up to $100 back!”
The only popup I could spot is the “open a new account” text link or button. It opens up a new smaller window: https://apply.scottrade.com/applyonline/apply.aspx
If you choose to you may click on the link under, “Contact Us 1-800-619-SAVE” which is an email address: support@scottrade.com If you select the email address, you will have another popup window open: https://apply.scottrade.com/applyonline/SendEmail.aspx
I think that the pop-up windows are very low in number and controlled by the user and therefore not very annoying. For the company, it allows for the main page to remain open and on the user’s desktop.
https://www.mcafeesecure.com/us/merchants-moreinfo.jsp
This is a McAfee site whose content=”PCI Compliance and Secure Website Certification from McAfee Secure. Automated network security audits provide an affordable means of ensuring your customers’ transactions remain secure.”
Where to find the pop-up is the “Questions?” banner on the left side: Click here to chat with a customer service representative. It opens up a chat window allowing the customer to chat and ask for help while staying on the page. This is valuable tool for both the website owner and the user.
This is great: http://www.popuptest.com/ If you want to find popup windows, there you have it. My popup blocker is working fine. On the first link, there is supposed to be 10 popup windows and it caught all of them (but only notified me of 6).
Firefox 3.0 stopped all except: http://www.popuptest.com/popuptest8.html and this one: http://www.popuptest.com/popuptest6.html
So, of course, while each of these might be annoying, the point is to test your browser’s pop-up defense and thus useful.
Obviously, not all pop-ups are unwanted. The browser and/or pop-up killers should be smart enough to recognize or allow you the choice to view the pop-ups you actually want to view.
July 14th, 2008
I thought you might get a kick out of this. Through the class
and some on line studies, I was able to create essentially the
very same affect using 4 different coding methods. The first
three are in Flash 2.0 and the last one is using javaScript.
———————————————-
ARRAY:
var clipArray:Array = new Array(one_mc, two_mc, three_mc);
a_mc.onRollOver = function() {
showClip(one_mc);
}
b_mc.onRollOver = function() {
showClip(two_mc);
}
c_mc.onRollOver = function() {
showClip(three_mc);
}
function showClip(l_Clip:Object):Void {
for (i=0; i
{
hideClip(clipArray[i]);
}
l_Clip._visible = true;
}
function hideClip(l_clip):Void {
l_clip._visible = false;
}
———————————————-
FUNCTION:
a_mc.onRollOver = function() {
onShow(one_mc);
}
b_mc.onRollOver = function() {
onShow(two_mc);
}
c_mc.onRollOver = function() {
onShow(three_mc);
}
function onShow(movClip:Object):Void {
onHide();
movClip._visible = true;
}
function onHide():Void {
one_mc._visible = false;
two_mc._visible = false;
three_mc._visible = false;
}
———————————————-
SWAPDEPTHS:
a_mc.onRollOver = function() {
onTop(one_mc);
}
b_mc.onRollOver = function() {
onTop(two_mc);
}
c_mc.onRollOver = function() {
onTop(three_mc);
}
function onTop (movClip:Object):Void {
movClip.swapDepths(0);
}
July 8th, 2008
Dynamic Hypertext Markup Language (DHTML), rather than being a distinct language on its own, was meant to be the technique whereby JavaScript can dynamically manipulate XHTML/HTML tags’ content and CSS styles, thereby creating rich client interfaces. According to the World Wide Web Consortium (W3C): “Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.” Understanding DHTML is about using JavaScript, the Document Object Model (DOM), HTML events and Cascade Style Sheets (CSS) to create dynamic and interactive web pages should help someone if they are searching for web pages using DHTML.
While I was searching for web pages which utilized DHTML I found a lot of pages that dealt with interactive menus. I learned about the different objects that can function within pages that are designed in either XHTML 1 and HTML 4. I learned that DHTML is about the compatibility of the DOM and their properties and methods.
I saw pages that allowed for keyboard access (arrow key navigation). As I mentioned, I saw a lot of menubar objects; static vertical and horizontal layout, floating, drag, drop & dock behaviors. With DHTML the developer can create intelligent popups instead of using, overusing the menubar objects through buttons. Also, as we are familiar, JavaScript may also be utilized whether it is the menubar or a button to give client-side events a boost. I also found large menu items with scrollable grouping allowing the user to adjust the viewable portion of the group. DHTML web pages allowed for different colors, sizes, borders, and fonts, all of which make for a highly customized look and feel.
While utilizing your DHTML toolbox to create and show off your skills, an abstemious website might also be in the running for most appealing. Some of the pages I found to be a bit too much. The overuse of colors, actions and others techniques made some pages just too confusing. I’m not sure that shaking text is appropriate anywhere on a web page. Sometimes, a user might input valid information that doesn’t meet the validation requirements. In that case, the user has no choice than to leave the page altogether.
I agree that less is best when it comes to web design. If it’s not a game, why make it look like one? Conservative use of color and objects will make a web page more accessible and easy to use for a larger web audience.
1) Drag and Drop DHTML: http://neb.net/playground/dragdrop/
http://brothercake.com/scripts/dbx/dbx.html
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_move
2) Interactive Menus: http://www.projectseven.com/products/menusystems/index.htm
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal
3) Shaking examples: http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_earthquake
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_link_shake
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_img_shake
Dynamic HTML (DHTML) References: http://www.w3schools.com/dhtml/dhtml_examples.asp
http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_randombanner
June 25th, 2008
