SRL Archive - Web Development

I was looking at making an interactive website (just for funsies) and I was after a little help :) A site that interested me was the following:

http://michel-doudin.com/

I like how it is clean and interactive without using flash. I researched a few of the things and found that these kind of sites are made using HTML5 and CSS3. The things I want to learn, if anyone knows how:

• Mouseover (change of image like on the linked site)
• Keyboard input (for possible navigation)
• Transitions and animations (for navigation around the page)

Post some basic code representing some of these things and I'll be very happy, and may give you a special prize :) I know @Kyle Undefined; is a good web developer; anyone else? :)

Interacting with the background like this: http://www.ro.me/ is also very neato indeed!

codecademy is a GREAT place to learn various web languages :)

Kyle does know A lot of these web based languages.

From: xtrapsp
codecademy is a GREAT place to learn various web languages :)

Kyle does know A lot of these web based languages.

Looks like an awesome site - will definitely check it out! Can not believe I've never heard of this before! Thanks :)

http://codepen.io/

Also another nice site :)

From: Press Play


Interacting with the background like this: http://www.ro.me/ is also very neato indeed!

wow I saw some cool websites in my life but ro.me is just amazing!

- Mouseovers: Can be done with CSS Sprites, and the best way to do it honestly. No load time compared to doing it with JS. CSS Sprites are supported by all browsers and all versions of IE minus 6 and below (You can get them to work, just a REAL PITA).

- Keyboard Input: With jQuery (Or simple JS) you can trap key presses up/down. Very easy to do, and it appears he utilized this jQuery plugin, http://demos.flesler.com/jquery/scrollTo/. Didn't take a look at the code though, but it operates just like that for the most part. I would still allow people to scroll, and still take key input, but that's just me.

- Transitions and Animations: This can be done with CSS3 for the most part. Not all browsers support it, but it's really easy and fun to build. I do a CSS3 transition/animation and for unsupported browsers I do JS implementation. Just a nice fallback. I did a CSS3 page with animations for a company promo, and I have the code still, I want to host it on my site to show it off.

From: Kyle Undefined
- Mouseovers: Can be done with CSS Sprites, and the best way to do it honestly. No load time compared to doing it with JS. CSS Sprites are supported by all browsers and all versions of IE minus 6 and below (You can get them to work, just a REAL PITA).

- Keyboard Input: With jQuery (Or simple JS) you can trap key presses up/down. Very easy to do, and it appears he utilized this jQuery plugin, http://demos.flesler.com/jquery/scrollTo/. Didn't take a look at the code though, but it operates just like that for the most part. I would still allow people to scroll, and still take key input, but that's just me.

- Transitions and Animations: This can be done with CSS3 for the most part. Not all browsers support it, but it's really easy and fun to build. I do a CSS3 transition/animation and for unsupported browsers I do JS implementation. Just a nice fallback. I did a CSS3 page with animations for a company promo, and I have the code still, I want to host it on my site to show it off.

http://craig.is/killing/mice Easy to use keyboard library. If you want to go a step above regular jQuery and not have to get key codes for everything.

http://daneden.me/animate/ Examples of CSS3 transitions.

From: Kyle Undefined
- Mouseovers: Can be done with CSS Sprites, and the best way to do it honestly. No load time compared to doing it with JS. CSS Sprites are supported by all browsers and all versions of IE minus 6 and below (You can get them to work, just a REAL PITA).

- Keyboard Input: With jQuery (Or simple JS) you can trap key presses up/down. Very easy to do, and it appears he utilized this jQuery plugin, http://demos.flesler.com/jquery/scrollTo/. Didn't take a look at the code though, but it operates just like that for the most part. I would still allow people to scroll, and still take key input, but that's just me.

- Transitions and Animations: This can be done with CSS3 for the most part. Not all browsers support it, but it's really easy and fun to build. I do a CSS3 transition/animation and for unsupported browsers I do JS implementation. Just a nice fallback. I did a CSS3 page with animations for a company promo, and I have the code still, I want to host it on my site to show it off.

Thanks! Put it up on your site; I want to see :)

From: Bobarkinator
http://craig.is/killing/mice Easy to use keyboard library. If you want to go a step above regular jQuery and not have to get key codes for everything.

http://daneden.me/animate/ Examples of CSS3 transitions.

Thanks for this! I'm going to re-learn all of HTML and CSS first, because I'm really nooby, and I can't even figure out how to make picture animated ahaha :$

So far, as a test, I've got:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="animate.css">
</head>

<body>

<img src="http://img585.imageshack.us/img585/3771/pressplayavatar.png" class="animated" alt="Press Play">

</body>

</html>

Good start, I guess…

[NOPARSE]AHAHAHAHAHAHAA, time to learn :)[/NOPARSE]

From: Press Play
Thanks! Put it up on your site; I want to see :)


Thanks for this! I'm going to re-learn all of HTML and CSS first, because I'm really nooby, and I can't even figure out how to make picture animated ahaha :$

So far, as a test, I've got:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="animate.css">
</head>

<body>

<img src="http://img585.imageshack.us/img585/3771/pressplayavatar.png" class="animated" alt="Press Play">

</body>

</html>

Good start, I guess…

[NOPARSE]AHAHAHAHAHAHAA, time to learn :)[/NOPARSE]

I'll put it up when I have the time. :)

If you need anything, you know how to reach me. I can't promise a quick response, though.

Who can teach better than w3schools. It's the best website to learn such technologies.

W3schools is a joke.

From: Himanshus
Who can teach better than w3schools. It's the best website to learn such technologies.

You're joking, right?

http://w3fools.com/

I recently just took an interactive web programming module at university. This is the modules webpage:

http://bit.ly/aber_iwp

You might find some of the lectures handy.

From: heron_
You're joking, right?

http://w3fools.com/

I feel shame, all the web design competitions I have been apart of the judge was one of the higher ups at W3Schools fml.

Example of it being a joke:

this forum software uses a wrong & bad doctype.. that being said, majority of sites do

there are also tons of useless things defined that shouldn't be / don't need to be
stuff that hasn't needed to be done in 5-10 and more years..

w3 and w3schools is cool if you know exactly what you're doing, and need a quick reference

but honestly, you should install bluefish for these types of things:
http://bluefish.openoffice.nl/index.html


not only does it do this, and tell you everything for all the functions (or most of) php.. but it'll do this and help with all of css/html/html5/css3 and other programming languages (that I don't use)

whats a good editor that you guys use for writing HTML5 or CSS3. Is there an actual IDE for it? Visual Studio? I used Notepad++ before :D

TheNewBoston and W3shools is a great place for learning HTML and CSS. That's were I learned it!

go to w3school.com this could help you i think

People are still referring to the older W3Schools when it comes to it. I would never recommend learning an entire language from them, but for referencing now and again it really isn't that bad (coming from someone who's been a website developer for 6 years now). I'm in no way trying to defend them, but they definitely aren't as bad as what everyone is making them out to be anymore.

Towards the OP, it's all down to the way in which you learn. If you learn from interaction, I suggest you start with some very basic HTML5 items such as structural tags, then start moving further and further in. Then start on CSS3. When I started to look at it I wish I had started on HTML5, it would've made life easier. Canvas is your best friend when these kind of sites and apps come around, make sure you understand it and use it to it's full ability as it truly is a great tag to use in interactive situations. I would also never suggest learning anything from these sites, pick up a book and read it. The information in books to information on web pages is far more superior and trustworthy. If you encounter anything you don't understand then feel free to PM me, I'll usually be around.

Towards the guy asking about editors, I prefer to use vanilla ST2 (or ST3) very lightweight and probably the best editor and syntax highlighter available for linux in my opinion.

I can't believe no one here has pointed to developer.mozilla.org yet.
This is the best resource out there currently, as far as references go.
I can't speak to the quality of all of the tutorials since many are just aggregated, but I looked over a few and they seem fine.

[table="align: left"]
[tr]
[td]General Reference:[/td]
[td]https://developer.mozilla.org/docs[/td]
[/tr]
[tr]
[td]Tutorials:[/td]
[td]https://developer.mozilla.org/docs/Web/Tutorials[/td]
[/tr]
[/table]

From: core
I can't believe no one here has pointed to developer.mozilla.org yet.
This is the best resource out there currently, as far as references go.
I can't speak to the quality of all of the tutorials since many are just aggregated, but I looked over a few and they seem fine.

[table="align: left"]
[tr]
[td]General Reference:[/td]
[td]https://developer.mozilla.org/docs[/td]
[/tr]
[tr]
[td]Tutorials:[/td]
[td]https://developer.mozilla.org/docs/Web/Tutorials[/td]
[/tr]
[/table]

I'm pretty sure someone did o.o, it did come to mind …

From: xtrapsp
codecademy is a GREAT place to learn various web languages :)

Kyle does know A lot of these web based languages.

yes i agree with you…

Both sites you find interesting is mostly relying on JavaScript to make am interactive. Using JavaScript you can make anything from small "like"-buttons (no browser refresh).. to media-players, games.. etc.

Thanks for this information.