How can I do these things?

[davidwes]

Hi. I like what this guy did on his website

http://patrickyan.net/

Its very clean.

I also really like panic.com/coda I love the pop up that happens. How do they do that?

 

[angelwatt]

The designer is making use of the MooTools JavaScript framework, which has the effects you're seeing. It seems pretty nice, but it sucked that it required JavaScript in order to see the page. That part was a let down.

 

[snickelfritz]

Isn't some form of ECMAscript required to animate a webpage?
ie: how would you do it otherwise?
Just curious.

 

[angelwatt]

Isn't some form of ECMAscript required to animate a webpage?
ie: how would you do it otherwise?
Just curious.

Flash.

Though, I guess you could say Flash makes use of ActionScript, which is a implementation of ECMAScript with a bit of additional parts. Animations can also be done with gifs (not to do the linked page though). I've also done some animations with SVG, though technically I was powering the SVG with JavaScript. You might be able to do animation with VRML (virtual reality markup language), but I've never tried.

 

[snickelfritz]

No doubt.
I could code a site like that from scratch in 15 minutes in AS3.
I kinda thought you were alluding to some implementation of HTML/CSS.
IMO, AJAX is an excellent method for building RIA; but commercial web browsers are not really 100% consistent with this format yet.
The example posted here allows me to resize the text in my browser, which I find to be a little klunky.

 

[&Ingonyama]

If you don't want to code it yourself also uses mootools:

http://www.efectorelativo.net/laboratory/noobSlide/

 

[SrWebDeveloper]

No doubt.
I could code a site like that from scratch in 15 minutes in AS3.
I kinda thought you were alluding to some implementation of HTML/CSS.
IMO, AJAX is an excellent method for building RIA; but commercial web browsers are not really 100% consistent with this format yet.
The example posted here allows me to resize the text in my browser, which I find to be a little klunky.

On this forum we always try to inform developers not to rely on one proprietary format when at all possible. I'm sure you can create a Flash site quickly, but what about people without Flash, even if few? I'm sure Ajax could be used to query the database or server side file for the menu right side content when left side content is clicked, updating a div, but it relies on Javascript. Even solutions posed by others such as VRML requires a plugin, and so on and so on.

I also think developers should strive more towards rich web 2.0 which means animated graphics and interfaces (done tastefully and with usability and accessibility always in mind, of course) due to broadband connections being more commonplace than before and the advancement of browsers in both standard and PDA formats.

To me the key is balance - a developer who creates the Flash site needs a link to the HTML version, the developer who uses the MooTools fancy framework should make use of the <noscript> tag in body of the HTML and either code an alternative solution or inform the user of browser requirements within a page. Or use simple Javascript on the splash page which merely redirects to the Javascript enabled version, otherwise display the HTML version, could be a different directory with HTML only files.

I went to the site with JavaScript disabled and could not get past the first screen. And, in addition to the wonderful and imaginative ideas posted by others as to alternative solutions for the graphical interface - I propose it could be as simple as a frames driven menu system as to the noscript alternative. No fancy slide and animation (other than graphical animation) but those like angelwatt would be able to use the site too.

Whatever the method, noscript, redirect, simply inform user of the browser requirements and offer plugin downloading tips and so on, do at least one of these things. That's my .02 in all this.


-jim

 

[SrWebDeveloper]

The example posted here allows me to resize the text in my browser, which I find to be a little klunky.

But what if the user has a vision impairment and needs to increase the font size? One often unforgotten purpose behind percentage based font sizes is for scalability due to accessibility concerns. Absolute fonts would be klunky to that user. Browser "zoom" is not a standard feature in all major browsers yet although popular in some and third party screen readers and magnifiers are not fully mobile or affordable to all. Just some food for thought.

I'm not singling you out or pickin' on ya - I just am using your comments to discuss some key issues this site has raised, that's all.

-jim

 

[angelwatt]

No doubt.
I could code a site like that from scratch in 15 minutes in AS3.
I kinda thought you were alluding to some implementation of HTML/CSS.

I kind of missed what you were really asking. When I originally said I was disappointed that JavaScript was required, it was that JavaScript was required to see the page, not that JavaScript was used for the effect. Like SrWebDeveloper mentions, developers should make sure the site is accessible even when a visitor has JavaScript is disabled. The linked site is 100% inaccessible, which is what I have a problem with.

 

[snickelfritz]

Accessibility is the developer's responsibility.
The web developer cannot know which web browser his audience will be using, nor can he know, or even guess, what the client-side accessibility settings, CSS settings, Font settings, etc... might be.

To mitigate these unknowable variables, the web developer can simply take responsibility for all aspects of website development and delivery, including layout/design, UI, SEO, accessibility, alternate content, security, validation, error checking, etc...
To leave any of these aspects exposed to client side preferences is at best lazy, and at worst irresponsible.

Encapsulating these variables and addressing them within the architecture of the site is not a new development concept, but it generally requires the content to be loaded into an API separate from the web browser, which is itself a major variable.
This leaves only a single client-side variable: is the plugin installed?
If true: load rich content.
If false: load alternate "generic" content.

Users without plugins installed, and biased developers, are kidding themselves; the web browser is nothing more than a container for online content.
There is no real "standard" beyond that which is minimally required to facilitate the display of content across platforms.
ie: the browser must support current HTML specifications. Period.

Plugin reality check:

1. [Microprocessor]
   Device composed of silicon, plastic and metal.
   This device basically just opens or closes tiny little switches.
2. plugin - [firmware chip].
   Allows this device to communicate with RAM/HDD/keyboard/display by rapidly opening/closing the switches in a specific order.
3. plugin - [shell]
   Software that allows root level commands to be executed.
4. plugin - [operating system].
   Software "platform" installed on HDD allows to developers to write plugins that allow this device to browse/utilize other hardware/software plugins.
   Proprietary; converts this generic device to utilize specifically designed software plugins.
   ie: "Mac" or "Windows"
5. plugin - [device drivers]
   Proprietary plugins enable third party devices and more advanced functionality.
6. plugin - [applications]
   Proprietary software written for specific [operating system] plugins.
7. plugin - [web browser]
   Plugin for [operating system] allows user to connect to a wide area network and interact with generic standardized static content "HTML", regardless of platform.
   Plethora of proprietary designs in use, none of which are identical in terms of content development and delivery.
   Currently percieved as the foundation for all online content.
8. plugin - [Quicktime]
   Plugin for [web browser] allows users to view online content authored in the Quicktime format.
   All major [operating systems] and [web browsers] are supported.
9. plugin - [Real Player]
   Plugin for [web browser] allows users to view online content authored in the Real Player format.
   All major [operating systems] and [web browsers] are supported.
10. plugin - [Windows Media Player]
    Plugin for [web browser] allows users to view online content authored in the Windows Media Player format.
    All major [operating systems] and [web browsers] are supported.
11. plugin - [javascript]
    Plugin for [web browser] allows users to view online content , mimicking [operating system] [application] behavior, within the [operating system] plugin [web browser].
    This is the foundation for "web 2.0".
    All major [operating systems] and [web browsers] are supported.
12. plugin - [Flash]
    Plugin for [web browser] allows users to interact with content authored in Adobe Flash/Flex.
    All major [operating systems] and [web browsers] are supported.
    
    At the end of the line, you have a concatenation of plugin architectures, each parasitically borrowing from their ascendants, that results in an interactive environment for user.
    
    [Microprocessor]
    [firmware chip] >
    

    [shell]
    [operating system] >
    

    [device drivers]
    [applications] >
    

    [web browser] >
    

    [Quicktime]
    [Real Player]
    [Windows Media Player]
    [javascript]
    [Flash]​
    Why does the Flash plugin in particular, represent a violation of this paradigm?​

Think Different.

 

[Me1000]

The designer is making use of the MooTools JavaScript framework, which has the effects you're seeing. It seems pretty nice, but it sucked that it required JavaScript in order to see the page. That part was a let down.

Had they written it correctly they would have used anchors for users without javascript.

It is very easy to make a site that works well with users without javascript, and looks great for user with javascript.

Flash is not EVER the answer.

 

[angelwatt]

Flash is not EVER the answer.

Well there's always exceptions. If a symphony creator posts his pieces on a web site, there isn't anything he can really do to give Deaf individuals a true experience of his work. A painter can never fully describe his work for a blind person. I've seen some artist create artwork work with Flash that simply cannot be accomplished with other common web standards. But this is a case of showing off a work gallery. If the Flash is responsible for navigating the site or something functional then I think the developer needs to supply an alternative for those who do not use them. There's also the case when Flash is used to create a piece of software for a customer who makes certain requirements that ignore disabled users because the customer knows precisely who will be the users (usually employees). These are other cases where Flash is fine.

 

[SrWebDeveloper]

I could not agree more.

Nobody here can say with absolute certainty an interface type should or should not be used in a given situation - no matter the decision, someone isn't going to like it. It's subjective in nature, and dependent upon the context of the site and available resources and training/experience of the developer as well as the demands of the client. This is a long way of saying to each their own, do what you must, but -- do it sensibly.

How? Web standards help us do things "sensibly" which is to say we learn about strict rules of syntax as well as looser interpretations such as best practices that all contribute to a successful design which is easily navigated and accessible (successful). It's the combination of imagination and education that separates the best developers from the pack in terms of successful implementation of a given web technology, in my opinion. I strive for that every day, I often fail, but the one thing you'll never hear me say is technology "X" or "Y" should *never* be used, carte blanche, unless it's been deprecated according to a documented and widely accepted web standard (example: DTD's).

I don't mean to pick on the user who hinted at that, but this forum is for sharing of ideas, I feel this subject is important, and no disrespect is intended at all, honest.

-jim