Query nice looking forms

all replace ordinary html forms with better looking ones, but if javascript is off they still see the normal forms.

http://plugins.jquery.com/project/jNice

http://plugins.jquery.com/project/jForms

http://www.agavegroup.com/?p=35

Roundup of Links about Charater Encoding and Special Characters and Punctuation

Really its typography and really should be noticed by designers.

Rich Punctuation: How To Do It And Why You Should Bother
http://www.sitepoint.com/print/typographic-punctuation-web

The Definitive Guide to Web Character Encoding
http://www.sitepoint.com/article/guide-web-character-encoding/

This is my favourite, good reference to keep, expecially for macs. Helped me find degree symbols and also fancy quotes, copyright symbol etc etc.
Special characters not on keyboards
http://68kmla.net/wiki/List_of_keyboard_shortcuts

JQuery Scrollers

All of these are amazing but in demos the scrollbars seem to have jerky behaviour when you use it like a normal scrollbar. They look great when easing to and from certain points, but arent as smooth as the browser default scroller when you drag it like a normal scroller. Still, I like that the jscrollpane degrades to a normal scrollbar when people have javascript turned off.

Replaces ugly vertical scrollbars with your own pretty version. Also has easing etc.
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

The horizontal version of a fancy scroll bar.
http://plugins.jquery.com/project/jscrollhorizontalpane

this is another option, a step carousel. buttons step though the pics in the pane. can also have a got to first andlast button to see a sexy eased sliding animation
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

wow this is pretty extreme- scrolling in both vertical and horizontal. love the bouncy easing example. its very flash like.
http://flesler.webs.com/jQuery.ScrollTo/
Vertical and horizontal again. Can really see the use of this as it is shown in demo being for menus and sub menus, vertical and horizontal planes...
http://flesler.webs.com/jQuery.LocalScroll/#section1

JCarousellite
http://gmarwaha.com/jquery/jcarousellite/index.php#demo
nice bouncing effect-page shows lots of customisations to this plugin... good for simple image galleries... like for a blog or something

JQuery Resource Roundup

http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html
Massive. Lots of new goodness and ideas. The site has 3 other similiar articles.

http://blog.webdistortion.com/2008/06/11/pushing-the-boundaries-of-web-design-the-ultimate-user-interface/
Another good roundup of effects, some really nice form field effects examples shown here. Round form fields!

Kickass Webdev Resource Portal: Noupe.com

Looks huge, have to explore it later, lots of new looking stuff

30 Scripts For Galleries, Slideshows and Lightboxes

Keeper of a link at Smashing Magazine for 30 scripts for galleries, lightboxes and slideshows.

Smoothbox - sexy lightbox style gallery

Like lightbox, but very nice transitions and image caption area thats semi transparent.
Image shows demo from the developers site.










Also theres Squeezebox, which has a brilliant jumping out at you effect, the image scales up and it looks really cool.
http://digitarald.de/project/squeezebox/1-1/showcase/images/

How To Burn a cross-platform CD-ROM or DVD

Say your making a cross platform CD-ROM either in Flash or Director. You'll need to burn it and this is the easiest way I think to burn a cross platform disc when your working on a mac.
Use Toast 8 Titanium or above. I use Toast 8, and lo and behold the instructions on doing it are in the toast help PDF, which you can open from the Toast help menu.
Just search straight for "Making a Custom Hybrid Disc" and also "Creating a Temporary Partition " and follow instructions, its pretty straightforward. You can burn it to either a CD-ROM or a DVD disc.

Notes in general:
when you create the mac tempoary disc partition DONT have OPTIMISE ON THE FLY ticked, it is EVIL. it makes errors happen on intel or isnt compatible with 'mac osx extended' format or something. error code 43, and other stupid i/o write errors, data fork error etc.

You'll need to include an autorun.inf file on your CD which will automatically launch your projector when its played on a Windows machine. (If thats what you want to happen). There is no such equivalent for a mac unfortunately.
Autorun.inf is simply a text file with the following code in it:

[AutoRun]
open = Start_Here.exe

Where Start_Here.exe is the name of the file you want to automatically open/run/play when the user puts the disc in the computer. You can make an .inf file in a simple text editor like TextEdit and just save it with the appended extention .inf instead of .txt

Also, on a mac the window for the temporary files partition as it is displayed in your finder it open up a window exactly the same when the user clicks on the disc icon on a mac. To see what I mean;
With the window open of your temporary partition, in the finder, go to View>Show View Options. Change the background colour of the window or something and arrange the files using grid view or however you want. Burn the disc, then on a mac double click the disc icon on the desktop and a window just like the one you made in the temporary partition will open.

Free Button Sounds for Multimedia mp3, wav

http://www.flashkit.com/soundfx/Interfaces/Switches/Switch03-intermed-3659/index.php

Flashkit.com provides an excellent library of little sound effects for multimedia projects. Good for buttons, transitions, wipes etc. In mp3 or wav or flash. So no need to drill into old projects and grab old sounds or keep your own library.

Productivity Etc Blog

http://www.43folders.com/
Looks like a blog about time management and life hacks and mac. probably good for a regular reads.

Flash comboBox Component Bug

Bugs in Flash comboBox component.
I used this fix detailed on http://lailablog.blogspot.com/2005/12/flashs-combobox-component.html
Worked nicely.

"The ComboBox component in Flash does not behave as expected if used in a movieclip loaded by loadMovie or attachMovie. What happens is that the ComboBox won't open, as if it doesn't react to events.

1. Drag an instance of the component onto the stage of the movieclip that's loading the movieclip containing the ComboBox. It can then be deleted, the point is that the loading movieclip has the component in its library. This appeared to solve the problem for a lot of people.

Also theres a lockroot solution which I didnt try but is documented here:
http://livedocs.adobe.com/flash/9.0/main/00002626.html

Flash Video Tutorials

http://www.bluetorials.com/free%20stuff/more_tuts.html
Good range of tutorials for flash and other software, all as downloadable swfs. Good to watch in spare time. Theres a good one on the comboBox component.

SiteSuite

Make e-commerce sites, from a package deal for a monthly fee. Australia based. The 2008 Sydney Binneale is using their products.

What is RSS - A tutorial

Get into this RSS stuff. 

SEO and General Internet Marketing Tips

Good
http://www.sitesuite.com.au/page/community.html

This guide looks pretty definitive, read it when theres time. seems keywords meta tags arent very useful anymore. description tag is good because it sometimes shows up in a search engine under the title big link. but over all, test content is what is indexed and the title tag is very important.
http://searchenginewatch.com/showPage.html?page=webmasters

Blog about SEO and blogging etc etc
http://www.mccordweb.com/weblogs/index.php

Blog about SEO but more funny
http://www.davidnaylor.co.uk/

Googles webmaster central docs blog help etc
http://googlewebmastercentral.blogspot.com/

Web design blog - good step by steps
http://imgiseverything.co.uk/2007/10/01/nike-trainers-a-keyword-case-study/

Sprouts

This Sprout thing looks pretty swift, make little web aps with images, calendars, links, video, jukeboxes, really freaking simple looking, then you can mass post to blogger, facebook and all the rest. Could be super cool for promotional stuff. And I think some websites could be replace entirely with these... i think you can add rss content to them. All sorts of feeds etc... Its pretty massive. Cool thing is they update on the places you have put them from somewhere else it seems.

This sort of thing is so new wave to me, theres a whole lot of stuff like this out there I've never looked into. Gotta get into it all.

Sprouts are widgets, mini-sites, banners, mashups and other forms of rich media content. Here are some types of sprouts that you can build:

Promotional
Promotional sprouts are ideal for musicians, politicians, non-profits or any person or organization that has an audience and wants to provide them with content that can be virally spread. Sprouts can be edited at any time, and all copies in circulation are instantly updated, so your audience can be kept engaged and informed.

Personal
Personal Sprouts are ideal for...everyone! Create a slideshow, add your favorite songs to a jukebox, add links to your social networking profiles - whatever you want to do to make your web presence come alive! Share with your friends and collect theirs as well.

Informational
Informational Sprouts are ideal for any organizations that need to keep their web site content fresh. Informational sprouts can be of any size and can include multiple pages to pack in a lot of information.

Shopping Cart Roundup

To Google
virtuemart 1.1, osCommerce and trading-eye
and read this:
http://blog.webdistortion.com/2008/05/03/9-kick-ass-open-source-e-commerce-platforms-reviewed/

Zen Cart
http://www.zen-cart.com/index.php?main_page=infopages&pages_id=5
Free, open source, tableless layout, admin tool, international, looks like it integrates well with credit cards and the like.

Why should you choose Zen Cart™ to power your e-commerce site? Let's face it. There are 100's of shopping cart programs around, all with different strengths and weaknesses. Zen Cart™ is superior to most in ease-of-use, features and price.

Zen Cart™ is built for entrepreneurs by entrepreneurs. The program is built by programmers and designers who understand the online selling process from start to finish. Zen Cart™ has included all the necessary tools required to build a successful online store and we are constantly improving and upgrading the software based on our users requirements.

Shopify

http://www.shopify.com/design/

A hosted application with templates and hosting and everything all in thge one spot. Their key selling feature is that you can have a shop up and running in mins using only their services. The hosting is interesting because if the shop gets massive, they are ready with server farms to support it. 

From the site...

"Shopify is a full-stack e-commerce package. Everything you need is already included. It comes with full SEO, inventory, and content management.Our customers will tell you that Shopify’s “killer” feature is its design flexibility. If you want to sell your products, you have to sell in style. Poor design begets poor customers."

Here is an example of a small shop built using the software. http://shop.eboy.com/collections/t-shirts

Pricing: You can have a trial set up, for free. But the cheapest is $24 per month for basic option. Ultimate option is $299 per month. Each price range is a limit of how many products you canhave in the database which is a bit shitty. They also take a percentage cut from each transaction. (So its really less of a cart software and more of a shopping community idea like ebay, etsy etc.) So ummm... looks like a nice product but having them take a cut of every sale is a bit much - better off using open source software I think. Plus the basic plan dosnt include SSL for the admin panel. It would be great for people who just need something up and running ASAP. 

XCart

http://www.x-cart.com/

- X-Cart shopping cart software is based on PHP Smarty templates, this makes it very flexible and easy to modify. The data is stored in MySQL database.
- W3C XHTML 1.0 compliance of X-Cart storefront out of the box.
- You receive a complete source code and SQL tables for MySQL database to make them extended or customized easily.
- X-Cart is a turnkey package. Installation is handled by web-based step-by-step wizard to make the system running immediately after receiving it.

Templates look ok, not great typography though and kind of dated looking. Theyre pretty basic looking and would designing to make better. Think Shopify  ones looked better. Example: http://demo.x-cart.com/demo/home.php?cat=112

http://demo.x-cart.com/demo/home.php?cat=1366

Pricing: Everything seems to be sold seperately. You buy the software as a package. You buy module add ons. You buy the skin you want. You can host it with them or not. 

Add On And Partnerships 

Fulfillment by Amazon - Use Amazons pick and pack experience, warehouses etc etc. Would be great for testing out the American market without having to set up your own warehousing etc.

http://www.amazonservices.com/fulfillment/pricing.html

Adobe Exchange

Download hundreds of easy-to-install extensions, time-saving functions, code and more.

Project Management, Workflow, Methodology Roundup

Good discussion on workflow for making applications, eg e-commerce and the stages you should go through. They're talking about FLIP methodology for Coldfusion. No idea what thats all about but its an interesting rundown of A work process.
http://halhelms.com/webresources/flipout/flipout_3.mp3

General Points:

• Don't do briefing specification documents, either you or client. Because its too hard to describe. And they dont know how or what to ask for. Make a drawing like an architect does, make a model, then you can test it, no words... no lengthy emails. Make a 2hr wirefame model with real clickable links, then sign off on that as the requirements document. You can even sit there with them and make it.
  

Try this out
Wireframe Tool
http://www.bjork.net/index.cfm?fuseaction=content.display&page=wireframetool

DevNotes (a feed of messages actually on the wireframe page to go through iterative changes)
http://www.bjork.net/index.cfm?fuseaction=content.display&page=devnotesdeluxe

Stages of Production

1. Initial meeting, 'what do you want to do?' jot down a narrative of the requirements, in simple english, in descriptive terms. Then email that back to the client to get confirmation that you understood the scope and what the point of what your doing is. At this stage you explain the design process you'll use, and what the milestones are so they know. This is the chance to educate them about whats involved and what their deliverables will be.
   
2. Wireframing. A text based clickable front end in HTML with dummy text. No actual pictures no real layout. Just the functionality and content blocks. It can even become the functional code later. Client must use the thing at this stage, not be passive and just LOOK. They must use it. The great thing is they dont get all emotional about colours and shapes and pictures. They just refine the functionality bare bones.
   
3. Prototyping is... making the design and getting it right, looking exactly how it should but without a database etc. (Here you make a 'working model' almost. But never 'present' the model to the client, the client MUST sit down with the application and use it, at each stage. Because when you show them, they dont really listen and just think its great. But when they USE it, they immediately see the problems. You use Devnotes here until its done. What I dont get here is HOW to make it look real, without having real database stuff coming in, or real code. Need to look into how that would work, because for small projects like little shopping carts, it would seem quicker to just make the thing, then see how it works and see whats missing, add extra functionality or tables etc.
   
4. Prototype freeze is when they sign off on the look and functionality and they cant change anything after that stage - because the most expensive time on the job is the coders. (BUT if the coder isnt the one on the job whos time is most expensive, then the priorities are different). He says it is important that this stage is a ritual, and you treat it with alot of gravity, it needs to be a real signoff, and it needs to be signed off by THE decision maker NOW, not the lackey who thinks they're in charge. They need to understand that NO changes are made after this. If they do want a change it will cost ALOT. He used the example were he charged someone $12,000 to change one paragraph. He also at this stage removes the Devnotes so they see they cannot make any more feedback.
   
5. Architecture. This is when he prints out another copy of the frozen prototype. To markup. Highlighting in one colour all outgoing links (and he names them if they are going to be code actions). Another colour all things on the page that are variable (a dynamic element), like a username, or a form field. He also gives all of the variables names. The objective is to identify dynamic elements and exit points from a page and where they go. Take this highlighted stuff into a mapping app like Mindmapper, or Visual Mind, Mind Jet, Mind Manager. So this is what I'd know as a sitemap but a complex one for database design. Purpose of it is to find holes in things you havnt thought of yet.
   
6. Then he goes into coding and other stages but its looks like specific info to coldfusion. The interesting thing is that up until here, no real coding has been done at all.

Other stuff:
This article is an excellent description of what a wireframe is, and how to easily make it in dreamweaver.
http://www.sitepoint.com/article/wire-frame-your-site

Wed Coding Services RoundUp

Saw these ads, would be interesting to try out or read into sometime. Beware of them just using iweb or something to churn things out...
Coould be good to get layouts sorted quickly then monkey in duplicate pages.

XHTML/CSS SERVICES:
http://www.psd2html.com/order-now.html
https://w3-markup.com/order

Mobile Browser Testing Roundup

Offers remote access (for a price) to real mobile devices with usable GUIs to test heaps of mobile devices
http://dev.mobi/vdl

Browser Statistics Roundup

The counter.com
http://www.thecounter.com/stats/2008/July/browser.php
At July 2008.....
IE7 41%
IE6 37%
FF 16%
Safari 3%
Opera x 1%
Unknown 1%
Netscape x ... 0% hmmm

Browser Testing Setups and Resources

Snippets of advice form across the web:

Since we are developing websites on Macs, we have no more problem with cross-plat-form/Multibrowser-Checks!

Mac has Firefox, Opera, IEMac and Safari
Win XP via Parallels has Firefox, IE 3-7 with multiple IEs, Opera, Netscape
Win Vista via Parallels has it’s IE 7
and Linux could be installed if needed!

You can run all of these Browsers at the same time in the coherency-mode without switching a windows, or rebooting at all!

What Browsers To Test On

Various snippets from across the web.

General consensus:
IE5x dead, IE5mac dead, Netscape dead (its actually stopped being developed). Apples MobileMe dosnt support IE6 which is refreshing, but dont think we can be that bold yet.

But My Current Paranoias Are...
1/ For Schools, and government sites, I wonder if that can be the case. Can 5x browsers be dead, what about all those underfunded public schools out there in regional areas on Telstra dialup since 1995... Netscape for sure?
2/ Furthermore, what about new breed mini school laptops that cost $300 and run on Linux? Surely that means school based sites need to be tested on Linux AND able to display at that mini resolution. Here is a case where a Linux user might not be an UberNerd, and might not be able to upgrade things themselves.
3/ MOBILE BROWSING... iphone is Safari so thats fine. But what about Blackberrys, you can get Opera, so that makes Opera quite massive...surely... Also they have shitty built in browsers that might need to be tested in upcoming years... PLUS, theres a whole new usability for small screens, like you cant click on dropdowns very easily, or microscopic text links.

----------------------------------------------------------------------------------------------
This is not always true. Safari 2.x often causes me problems, when IE6 is behaving itself. And I believe its market share is big enough to be deemed important.

Browsers a developer tests on:

• Internet Explorer 6, PC
• Internet Explorer 7, PC
• Firefox (about 1.5+), PC
• Firefox (about 1.5+), Mac
• Safari (about 1.3+), Mac
• Opera, occasionally (and then 9+)

Browser testing Article

Browser Tests, Services and Compatibility Test Suites

http://www.smashingmagazine.com/2007/10/02/browser-tests-services-and-compatibility-test-suites/

Lists various resources for browser testing, such as iecapture, multipleie, browser statistics, multi-safari, linux stuff, all the 'browser cam' services, acid test, cool png test images for testing what png types are supported,

A good reminder on whats really necessary when testing:
There really isn’t a reason to test multiple versions of browsers like Safari, Firefox, or Opera. I say this for two reasons; first, there isn’t the marketshare to do extensive testing for browsers that are in the vast minority; and second, IE6 is effectively the lowest common denominator as far as features and creative CSS/HTML rendering. Generally, when you bend over backwards to support IE6, you’re stripping out a lot of the things that even the good browsers would get tripped up on.

An unintentional third reason is that users of nonstandard browsers tend to be more tech-savvy and tend to upgrade reasonably quickly when prompted to do so.

SOME STAT EXAMPLES:

Netherlands:
IE 6.0 – 47.6%
IE 7.0 – 41.1%
Firefox 2 – 6.1%
Safari 2 – 1.6%
Opera 9.2 – 0.7%
Firefox 1.5 – 0.4%
IE 5.0 – 0.4%
Mozilla 1.8 - 0.3%
Opera 9.0 – 0.2%
Others – 1.3%

From a site that gets 80,000 visits monthly, mostly U.S. but worldwide too. We see that Netscape is even lower than Opera. Netscape not worth worrying about??

1. Internet Explorer 76.96%
2. Firefox 19.80%
3. Safari 1.94%
4. Opera 0.74%
5. Mozilla 0.30%
6. Netscape 0.14%
7. Camino 0.05%
8. Konqueror 0.02%

IE Breakdown
1. 6.0 75.07%
2. 7.0 24.54%

Firefox Breakdown
1. 2.0.0.6 53.57%
2. 2.0.0.7 32.57%

-------