What exactly is this developer using in this theme?

[berniecarlin]

Hey Everyone - this is my first post on killersites - i've heard some good things from developers i've worked with.

 

I'm a social media director for a restaurant group. my proficiencies are mostly in unix/linux and server management/administration. I'm also pretty handy with Creative Suite, but I'm trying to teach myself the basics of web design.

 

I'm at that point where I'm trying to find out where my absolute starting point is. And I'm finding that I'm confused at where Flash is falling out of favor, and HTML 5 is becoming the new standard. I don't understand how HTML5 can replace what an entire software suite is designed to produce (from Photoshop to Flash to Dreamweaver, etc). I'm sure it makes sense if you know everything there is to know, but I'm missing some points.

 

For example:

 

I recently came across this site when looking for new wordpress themes to incorporate. - http://www.elegantthemes.com/demo/?theme=MyResume

 

So designer Nick Roach presents a resume in a clean way. What I'm curious about are the buttons below in the portfolio section.

 

Are these a product of flash? is it actionscript? is it something else? What controls the "depression" of the image on mouseover?

 

in flash cs5 there are templates that do similar things, but i don't remember the ability of a pop out image like this example.

 

When I access developer tools in chrome, I don't get many hints from the script. But then again, I may just not know what I'm looking for.

 

Any input?

 

Again, I'm just trying to get myself beyond where I am now, which is producing static images in photoshop and creating heatmaps for interaction/navigation to other pages, then hosting them myself with embedded video or other media as i need it.

 

thank you for your help!

bernie

[falkencreative]

If you look at the source code, they are using jQuery, a popular Javascript library. As far as I can tell, it's custom jquery they have written themselves.

 

<script>
jQuery(document).ready(function() {

var $thumb = jQuery('a.themeitem');

$thumb.mouseover(function(e) {				   
	jQuery("body").append("<img class='gallery-hover' src='"+jQuery(this).attr("rel")+"' alt='' />");
	jQuery("img.gallery-hover").css({display:"none", visibility:"visible"}).fadeIn(350);
}).mousemove(function(e) {
	jQuery("img.gallery-hover").css({left:e.pageX+20, top:e.pageY-50});
}).mouseout(function() {
	jQuery("img.gallery-hover").remove();
});

});

</script>

 

That code controls adding in an image when the link is hovered over and removing it again when the cursor leaves the thumbnail. The hover effect is also done with CSS/Javascript, though I'm having trouble tracking down the exact lines that control that effect.

[berniecarlin]

That code controls adding in an image when the link is hovered over and removing it again when the cursor leaves the thumbnail. The hover effect is also done with CSS/Javascript, though I'm having trouble tracking down the exact lines that control that effect.

 

Thank you for the quick response!

 

i have a little html under my belt, but it's just been enough to help me "know what i don't know" if that makes sense.

 

in your opinion, would you suggest taking the time to learn php/css before javascript, or would javascript be okay to start with? obviously i would want to learn JS before trying to learn a library like JQuery. PHP might be a good transition, because i have a decent understand of MySQL and general database management.

 

I'd even like to start with something a little more stone basic that I can get back into programming with. maybe python or ruby. but whatever i chose, I still need to get myself up to speed with more contemporary web design techniques at the same time, because i'm treading water reading "for dummies" books and watching tutorials as each roadblock comes up.

 

While it gets the job done, it's woefully inefficient.

 

Thanks for your help, and if anyone comes across this post and could talk a little about how they climbed the web design language ladder, I'd really appreciate it.

 

I've been browsing the forums as I work tonight - are there any favorite threads/sections that I should take a look at? Or other sites/forum groups that would be a good read?

 

Thanks again!

 

Bernie

[Andrea]

The very basics are HTML AND CSS - they go hand in hand. What's next depends on your needs. PHP may be more useful than JavaScript - but both have so many pre-fab scripts out there, you can actually get away with using them without knowing the language itself. But of course, the better you understand how they work, the easier it is.

[falkencreative]

I would suggest having a solid understanding of HTML and CSS before moving on to Javascript or PHP. If you aren't comfortable with CSS yet, make sure you learn that first.

 

Whether you learn Javascript or PHP after that point depends on what you are wanting to build. Javascript is primarily used for animation and effects -- hiding/showing elements, slideshows, moving elements on the page, etc. PHP is more for complicated functionality -- interacting with databases, handling forms, password protecting areas of a website, ecommerce functionality, etc.