In JavaScript, you have a bunch of events that you can tell the web browser to watch for. Here is a short list:
onclick
onmouseover
onmousedown
… There are many more. The proper nerd-term for all these is ‘event listeners’ – they ‘listen’ for events to happen and when they do (ex: someone clicks on a something,) you can have JavaScript fire off some function.
Event Attributes
Instead of using JavaScript to apply eventlisteners (using the addEventListener() method) to tags on your page, you can simply use HTML event attributes. For example:
<p onclick="aFunction()">
This is some text.
</p>
In the above code, I tell the browser that if someone clicks on the paragraph tag, that the ‘aFunction’ function should be activated. Nerds will refer to this as  ‘calling a function’ instead of activating.
The Death of onMouseover?
The onMouseover event listener ‘listens’ for someone to hover their mouse over the element (HTML tag) that it is bound to – like what we did with the paragraph tag above and the onclick event.
It’s a sweet effect and works on all the browsers, except it doesn’t work on mobile devices – that sucks! You have to remember that within a few years, more than 50% of the Web’s traffic will be mobile traffic – people using smartphones and tablets.
Basically, that means you should probably not use onMouseover event listeners.
I was recently asked by my dentist if I had any information for his daughter, who wanted to get into the gaming industry, on the artistic side of things.
So I consulted the nerd-herd and then came back with what you will read below. Though KillerSites is hardly a gaming blog, I figured I would repost here anyway because my dentist told me that this was by far the most information he and daughter had seen on the subject.
Anyway, here you go …
From Sean:
Hey Stef
Gaming is a more stable environment than Film or Television. More often than not film and TV animators travel to work in different companies around the world. As for Gaming even when the economy is tanking people still love to get away from life and sink into a game world.
[ Film and TV / Games ]
Position available for art students include:
Storyboarding
http://www.wikihow.com/Create-a-Storyboard
Conceptualization Art
http://www.conceptroot.com/
Matte Painting
http://mattepainting.org/
Proficiency in Photoshop/Illustrator
https://www.adobe.com/ca/products/photoshop.html
https://www.adobe.com/ca/products/illustrator.html
[ 3D Software ]
The 3D Software I would recommend using is Maya.
Free Educational version
http://www.autodesk.com/education/free-software/maya
[ Schools ]
Alot of home grown 3d gaming talent have pass thought the doors of the NAD Center. They have teachers that currently work in the industry and can become a great reference for job opening in the indusrty.
[ Traditional Animation ]
Traditional Key Frame Animation, frames drawn every frame by hand, is very important to take to become a great animator.
This on a book that most animators have on their shelves at home.
Animators Survival Kit by Richard Williams
Here is a pdf of the Book
http://courses.cs.washington.edu/courses/cse460/07sp/reading/richard_williams-animators_survival_kit.pdf
[ DEMO ]
A Great DEMO, is the most important as it shows what you can do. Some artistes, animators, modelers etc. I know are self taught so school was not involved. A great DEMO can often speak louder than a certificate form a school. It is what you can do with what you know and not what you know.
Hope this helps. Need any other direction let me know
Scot
From Luke – a director at a leading gaming company:
I think Sean covered it pretty well from a technical point of view! Additional info that I can say about gaming is the following:
There are many options she can take:
Gameplay Animation
Cinematic Animation
Concept Artist
Technical Artist
Character Artist
VFX Artist
UI Artist
…
Some companies name the titles differently but more or less do the same things.
I would suggest starting to become active in various gaming industry forums and websites. Look for forums that companies offer, for instance at EA we have the following LinkeIn forum that people can follow: InsideEA: (Electronic Arts) People, Games & Careers. Other companies have their own similar forums. Also check out game company’s websites in their career sections. They offer lots of info and recommendations. Our’s is Jobs.ea.com.
Follow up on all the industry trade shows(E3, PAX, GamesCom, ComicCon, GDC(Game Developers Conference)) and media(IGN,GamesSpot, etc…)…
A lot of what helped me get into the industry is doing research on all the above info…kinda like the Wook does! 😉
Gaming is a constantly evolving industry so people need to stay well aware of tech and changes going on. Best way is to read a lot of gaming news and info!
I just handed in the last chapter to my new book ‘Web Design Start Here’ last week. I am told it should hit the stores in April. Yep, print is slow!!
Nonetheless, the principle work is done for me and it marks the first time in years that I am in print. Last time I wrote, was for Web Designer Magazine … I would say about 4-5 years ago! Time flies …
As we get closer to publication date, I will be releasing new video tutorials that are meant to support and accompany the book.
In this video, you learn about HTML5 and cutting edge CSS techniques. As long as you know basic HTML and CSS, you should be good to watch this video lesson. And yes, all the modern web browsers support this.
… At the same time, check out our new training site: webmentor.org.
I like to start my articles with the conclusion – saves you time:
Dreamweaver is not relevant in modern web design. Why?
To make good websites, you need to understand the code behind the sites. You need to learn code.
Dreamweaver does have a code editor but there are many more capable code editors out there that are free or at least much cheaper than Dreamweaver.
Because you need to understand code, Dreamweaver’s point-n-click tools are becoming relics of the 1990’s when web code was so bad, that tools like Dreamweaver were a godsend.
The code behind web sites (html, css, javaScript) is so well structured now, and so much more powerful (HTML5 and CSS3 rock!) that you can easily put out great websites with relatively little coding – as compared to what is was like in the past.
Let’s elaborate on the last point. Web design in the past, when the languages (HTML, CSS) were not as mature, the process of coding a website was rote; it was repetitious and mechanical. You had a lot of crappy tinkering to do, just to get a website up. In that environment, tools like Dreamweaver were welcome because they wrote the code for you.
These days, with the much better browsers (that read and process code properly) combined with highly effective web design frameworks like Twitter Bootstrap and JQuery, apps that try to hide the code from you (like Dreamweaver) are not that useful. In fact, they are counter productive because often times, the code they generate can get in the way of building a clean effective website or web application – it’s just too thick.
Browser Developer Tools Put another Nail in Dreamweaver’s Coffin
All the modern web browsers have a very powerful set of developer tools that allow you to see exactly what is going on in your pages codewise; you can even change (for example) your CSS on the fly and see how it effects the page without touching your underlying code. This makes for ultra fast development.
Dreamweaver has these sort of tools but you have to be in Dreamweaver to use them and they are not necessarily 100% accurate in terms of what the web browsers will display – you might as well test in the web browser since people visit sites with web browsers and not Dreamweaver!
Conclusion
There is nothing wrong with Dreamweaver if you largely ignore the point and click tools, and stick to the code editor. But if you do that, why bother forking out the big money for Dreamweaver, when you can find more effectively code editors like Sublime Text or Notepadd++ for free or for much much cheaper than Dreamweaver?
Many K12 teachers are now being asked to teach web design for the first time. This presents a challenge since few teachers have professional web design and development experience.
I was approached about two years ago by a couple of schools who needed a way to more easily teach web design. Luckily, I had been working on an application that would more than just help: Studioweb is an interactive web design and programming training system that automates the teaching process:
automated quizzing
automated scoring
automated hinting
All based around a proven turnkey curriculum that I’ve been training people with for years.
The Key to Modern Web Design
Web design has evolved a lot over the last 20 years, the way websites are built today is nothing like the way we did it back in the early 1990’s. It is so different in fact, that web designers from that time would almost have to completely retrain themselves!
Today, web design is about:
HTML 5 … NOT XHTML
CSS and CSS3
Responsive web design – Bootstrap
WordPress
JQuery
JavaScript
You might have noticed that I did NOT mention Photoshop, Fireworks, Flash or even Dreamweaver. These tools are still used a lot but they are no longer central to web design. In fact, many web professionals never touch them!
The Recognition of the Importance of Code
One of the biggest changes in the last few years, is the world’s realising that code is now as important as reading, writing and math. When kids learn to code, you give them a practical skill set along with problem solving experience … all the while, you reinforce logical thinking.
Studioweb focuses on teaching real-world web design and programming techniques as well as the key fundamental concepts. Students come away with demonstrable skills that can be applied in the real world on real projects. The aforementioned cognitive benefits come as a bonus.
If you want to learn more or if you are interested in trying out Studioweb, feel free to contact me.
I recently got an email from someone who felt overwhelmed with all the apps they were trying to learn – learning Photoshop, Fireworks and Dreamweaver all at the same time can do that!
Do one thing at a time says I!
I’ve been there, where it seems there is so much to learn, that it becomes overwhelming. First, don’t make the mistake of believing the tools (Photoshop, Fireworks etc) are the goal – they are not. In fact, once you understand web design (development), you will likely being using 10% of Photoshop’s features … as an example.
That said, it is best to concentrate on one thing, get functional skills and then move on to the next. Jumping around and learning bits of this one day, and a bit of that another day, will just cost you time because you will be constantly shifting gears when moving from one subject/app to the other.
I am happy to announce that Studioweb is now being used as part of STEM education programs in the northeastern US.
Studioweb (that’s us!) continues to work with K12, community colleges, cultural centers and vocational schools to provide an to easy understand curriculum in modern web design and programming.
… Our courses are effective because experienced teachers designed them – not 20yr software developers.
Over the last two years, the Studioweb team has worked in the field with teachers and thousands of students to continue to refine Studioweb’s features and courses.
If you are interested in a turn-key interactive training system for web design and programming, please feel free to check out Studioweb.com.
I decided that (once again) I had to walk my talk and explore a new programming language. Swift is a good one to learn for several reasons:
Swift is an ultra modern language. It’s always good to be clued into the cutting edge.
Swift will open up the doors to speedy iOS programming. There’s good money in them Apples!
It looks like a lot of fun!
So there you have it PHP nerds. If you are looking to stimulate your programmatic brain or maybe expand the type of (programming) work you can do, Swift is something worth learning.
So I’ve cracked out my designers brush (mouse,) and started to work on a new website that we are setting up to log our adventures in Swift programming – Apple’s new programming language for both iOS and Mac OSX.
The Web Design Process is Iterative
You can watch the video below … but here’s the summary:
design/layout ideas should be explored by creating many versions and variations as quickly as possible.
don’t try to fine-tune your layouts when you are just working on basic themes and ideas.
once you’ve picked your basic style, then you can get into polishing it up.
Bonus tip: you want to leverage web frameworks like Twitter Bootstrap – it will make your life as a web designer or developer about 356.23 times easier!
