Useful languages for web design and which to learn first

Hi,

I currently know HTML, CSS and Actionscript 3.0 (not an expert but enough to get things done) and in the future I would like to learn PHP, MySQL and Javascript, so I was wondering what would be the order that would make more sense to learn this languages. I know this would be based in how much I’m planning to use each language, but at the end I want to learn all of them.

Can you guys share your experiences on how you guys learned these languages?

Should I start learning PHP or Javascript or MySQL?

Is there any other language that I should be considering like jQuery AJAX or Rubi on Rails… etc?

Thanks a lot

It all depends upon what you want to focus upon but basically I choose; Markup, CSS and Accessibility, PHP and MySQL and then some JavaScript all in that order.

Thank you for your reply!

I am thinking of learning PHP before Javascript as well.

If you know Actionscript, you’re halfway to Javascript already. Both are Ecmascript, though I’ve heard the scope is a bit different in AS3 and also apparently Flash can pre-compile or semi-compile the script while browsers don’t quite do that yet with JS (Mozilla, chrome and webkit are working on it though).

Though if “accessibility” were a language, I would put it up there maybe before JS, so you know where to look for potential issues as you write Javascripts and catch them before you learn bad habits.

The PHP/MySQL thing is going to be last, unless you work for someone who demands back-end skills in their front-enders. Which I think is silly unless the company has basically a single nerd running everything. Any shop of decent size should have front-enders and back-enders, period : )

Mostly, Flash and Javascript (and XML and a few other things) are considered “front end stuff” and so if you are already doing front end things (you do HTML, CSS and Actionscript/Flash) you’re already a front-ender. To get all your front-end skills down before delving into the backend makes more logical sense to me.

Though I was learning Perl for a bit before JS came and ate up my time… it’s not bad to learn your backend language in your free time for fun, but concentrate on your area first.

AJAX isn’t really a different language, though, is it? It’s just Javascript with XML. Nor is jQuery a language, but a Javascript library: a bunch of pre-written javascript chunks you can use instead of writing them yourself from scratch.

Very nice advice! Thanks a lot!

Though if “accessibility” were a language, I would put it up there maybe before JS, so you know where to look for potential issues as you write Javascripts and catch them before you learn bad habits.

Excuse my ignorance but what accessibility would cover in the design world?

I know I know, I don’t know what I’m doing.

Thanks

Ah, just being aware of the issues and the techniques to fix those issues that come with HTML, CSS, and Javascript/Actionscript/Flash. You know, how does the person interact with the page if one of those part of the page don’t load, or they don’t have a plugin or have scripts off? If they do have those things, how does it work without a mouse? Where does focus go? How fast are things blinking? What can google grab from it? Is sound necessary? How big of a screen? Does it work on a mobile? Cross-browser? Text browser? Screen reader or magnifyer? How is colour used? How are images used? etc etc

Generally not a problem from the back-end (PHP etc), so long as the front-ender has thought of these things and done a bit of testing (with machines, softwares, and most importantly, real humans).

No problem I’m glad it helped.

Yes, strictly speaking “accessibly” isn’t direct language but a skill-set and my spelling/grammar is becoming so shoddy I wrote “I cho[o]se” one of the side-effect of being dyslexic. :smiley:

Again, it’s more than likely you learn bits of them at similar times but then focus more deeply on a specific language.

Loosely Web Accessibility can mean that people with (dis)abilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to ageing, etc.

Thank you guys, it looks like I have been doing some of the point you guys have mentioned.

Is there a book or some tutorials that I can refer to and have a better understanding?

Thanks

About what, learning JS or PHP or MySQL or general accessibility?

I’ve seen a few nice articles about JS and accessibility, JS and graceful degradation, and overall learning JS.

About what, learning JS or PHP or MySQL or general accessibility?

General accessibility. - Thank you all for your replies!

Well, go check out the Accessibility forum here at Sitepoint. I believe there are some links in a stickie…
for some reason older threads just vanish, so there are only current threads in there.

I’m one of those who lump usability, compatibility and accessibililty/disability together. I don’t see the point in parading a site I’ve made around as being “accessible” if it only works in IE on Windows with a super-fast connection and Javascript enabled.

I don’t have a single link about mobility problems… and those are important. Think of older people, people with palsy or shaking, or people who have a crappy mouse (like my husband does… can’t click a checkbox with it to save your life). Maybe you want to do a search on that, because my links below make it seem like accessibility means “for the blind” and they’re a loud group but not the only one. Seniors in particular are a good group to keep in mind, and how familiar they may or may not be with their browsers or their computers in general. Double clicking is a problem for many (ha, only today do I learn you can click and then hit Enter… cause I’m so used to Linux single-clicks!).

WCAG 2 is the latest standards.

UseIt.com is where Usability expert Jakob Nielsen posts articles. He tests real humans with real sites to see how users really react to particular trends and settings on websites. You don’t have to agree with him, but he’s got hard data and so is terribly useful-- especially when you need to convince a client of something.

Bruce Lawson writes in the style I think in. His bloggitty blog-blog-blog seems to be about everything, including HTML5, so you have to sift through stuff, but that’s not bad. He’s lawlz!

Mike Cherim’s blog has some excellent stuff in it.
Here’s a piece about his WCAG2-compliant site which can be found at [url=http://lflegal.com/]Lainey Feingold.

Gez Lemon’s Juicy Studio is generally an accessibility blog. He has nice links to tests and things, and discusses ARIA.

Accessify is a general article site.

A YouTube video showing someone navigating through a web page using headers (h1, h2, etc) which is one of the easiest ways to navigate through a page. Good use of headers then can make your site easier to get through.

Jim Thatcher is known for his work in accessibility since his time at IBM with a blind colleague. Don’t worry if you’re not in the US, section 508 is based at least in part on WCAG and in general could be considered Best Practices even in other countries.

Javascript:
An older NorthTemple article about Javascript and screen readers. In general, with Javascript, you want to make sure that for every mouse event, you include a similar keyboard event. Mike Cherim even had an [url=http://green-beast.com/blog/?p=312]article pointing out a problem with a technique listed on [url=http://www.alistapart.com/]A List Apart (which is in general a good web-dev article site).

Roger’s blog is nice in general, and this specifically mentions some issues that may come up (even nowadays). 456bereastreet was better when it had comments, though. If you’re on a page with comments, read them. They are often more awesome than the article and people usually made good points. Roger had to turn comments off because of spam though : (

This is where I first learned how to write accessible forms, WaSP. Article’s by Ian Lloyd. Also [url=http://www.usability.com.au/resources/wcag2/]WCAG2 and forms! There have been a few important changes between WCAG2 and 1.
The link is broken, so maybe it’s moved, but http://www.rnib.org.uk used to have an article that explained how you need to be careful with overly long legends. Even my copy of JAWS still repeats the whole legend for each and every question if it’s in an inner fieldset, until you are out of that inner fieldset. In those cases I try to make the legend be more of a short title if possible.

CAPTCHA problems are important to keep in mind.

Tables:
Somewhere in here I learned pointers on accessible tables… specifically I remember finding the page to look up how axis and headers worked in tables. Note, the page is old (2002) and today screen readers DO support the axis attribute. Maybe not all of them but the most popular ones do (JAWS, Window-Eyes).

Flash:
Accessible Flash by Web-AIM, which in general is a site where I look stuff up. There’s also a site somewhere on Google that explains what you can do to get Googlebots to get to your Flash content.

In Ubuntu you should already have the orca screen reader. I haven’t actually gotten it to do anything more than announce itself and shut down but I hear it’s well-written. I do not like the voice and find it harder to understand than JAWS (which sounds like Stephen Hawking in its default “Reid” voice). Macs come with VoiceOver which works fine and is specifically directed with working with Safari as the web browser but it does have bugs specific to it.

If you get Windows running on a Virtual Box or Parallels or whatever, you can get a thumb-drive copy of JAWS from http://freedomscientific.com
While you’re there, check out their screen magnifyer MAGic. I don’t test my sites in a screen magnifyer but using one you can see how a cluttered (or spacey) web site can be hard to navigate in. You only see a tiny bit of the site at a time.
Refreshable Braille is interesting to see as well. Braille isn’t terribly popular among the blind but there are people who use it.

Test the contrast of your sites with GrayBit.
Test your site in three common types of colour-blindness with Visicheck. Both are beta-ish.

Anyway whenever there’s a particular thing you’re working on, like a form, a table, an application, a menu… then search for it with the word “accessibility” in the googles and see if anything interesting pops up.

That would prolly also go for mobiles, text browsers (Lynx being the most common, you already have it in Ubuntu), touch-screens and any other devices people start surfing with. For instance, some mobiles come with a stylus, but the browser doesn’t always seem to know if a touch of the stylus should be considered :hover or :focus, so if you know someone who has a mobile that works by touch then check your site in it.

Wow! This is good stuff thank a lot.

Stomme Poes, I couldn’t agree more with what said. Very good info as always.

Nor is jQuery a language, but a Javascript library: a bunch of pre-written javascript chunks you can use instead of writing them yourself from scratch.

You say jQuery is a bunch of pre-written javascript chunks…Wouldn’t that be a better choice than learning javascript?

Just adding to what some others have said, I generally recommend learning JavaScript before server-side languages like PHP. The reason is that JavaScript bolts onto the kind of functionality that you would like to give with CSS but can’t (for instance if you wanted to make stuff move about on click) or if you wanted to have those pretty slideshow effects that you see on the web. JavaScript adds behaviour to pages which users can interact with. While PHP is a great language it’s more about what happens when the user gives the site a command (like to add something to a shopping cart), it’s generally more focused towards more advanced scripts and applications where as JavaScript is there to enhance what you already have (with stuff which is more interactive and feature-full), this is a much simplified description.

Stomme has given you loads of useful links but if you would like a really good book on accessibility (something nice and meaty you can sink into) I recommend a book co-incidently called “Web Accessibility” (published by FriendsOfED), it’s HUGE but it’s very good at explaining how to make your website accessible. It’s probably my favourite book on the subject though it’s a hefty volume - but well worth a read. :slight_smile:

You say jQuery is a bunch of pre-written javascript chunks…Wouldn’t that be a better choice than learning javascript?

That depends. If you were moving to Finland, would you rather learn Finnish, or learn how to use a phrasebook?

“The cheese is old and moldy, where is the bathroom?”

Best line evar. : )

I’ve of the mind that if you’re going to use something, you’ll only use it correctly when you don’t treat it as a Black Box That Does Stuff For You. That’s what WYSIWYGs do, and you see how great their code is. I figure if you’re going to use a language with any regularity, you should learn the language itself. It wouldn’t hurt to learn the nitty gritty of it either: Javascript is really weird in where it’s fast and where it’s slow.

http://dev.opera.com/articles/view/efficient-javascript/
I’m currently going through those pages.

Also, if you choose to only learn jQuery, you’re at a disadvantage when you go somewhere and they use MooTools. Or Prototype… or worse, Flot/Flotr. That stuff’s nuts (subtypes of jQuery and Prototype specifically for generating charts, graphs, etc).

Learn both. Learn how to do it the slow hard way and how to optimise that, then learn a library to develop faster, esp since then you know when NOT to use them.

Ever see a site that takes a day to load, they have like 16 separate scripting libraries being called, and all they have is like a lightbox and some little hide-and-show stuff? That’s just Wrong with a capital R.

Thank all for your comments!

I learned JS first and then PHP and MySQL together. I think though it depends on what you are wanting to do with your website as to what you need to know first and then focus on the others. Hope this helps. :slight_smile: