Imprint © 2013 Smashing Media GmbH, Freiburg, Germany ISBN: 978-3-943075-59-5 (Version 1: February 2013) Cover Design: Ricardo Gimenes. PR & Press: Stephan Poppe. eBook Strategy and Editing: Vitaly Friedman. Technical Editing: Cosima Mielke. Planning and Quality Control: Vitaly Friedman, Iris Lješnjanin. Tools: Elja Friedman. Syntax Highlighting: Prism by Lea Verou. Copywriter: Lucy Leiderman. Idea & Concept: Smashing Media GmbH. About This Book Present across millions of websites and growing in popularity, JavaScript is an essential and practical for all programmers, designers and coding aficionados. Practical JavaScript Techniques offers expert instruction, tips and methodologies relevant for all levels of knowledge. Learn interactive CSS and jQuery techniques, how to take advantage of JavaScript's versatile capabilities and even how to build JavaScript- based gaming experiences. Whether you're perfecting Web design or building jQuery plugins, this vital resource is a must-have. TABLE OF CONTENTS Imprint Develop A One-Of-A-Kind CSS/JS-Based Game Portfolio by Daniel Sternlicht Five Useful Interactive CSS/jQuery Techniques Deconstructed by Jon Raasch Create An Animated Bar Graph With HTML, CSS And jQuery by Derek Mack A Beginner's Guide To jQuery-Based JSON API Clients by Ben Howdle How To Build A Real-Time Commenting System by Phil Leggetter The Developer's Guide To Conflict-Free JavaScript And CSS In WordPress by Peter Wilson Optimizing Long Lists Of Yes/No Values With JavaScript by Lea Verou Building A Relationship Between CSS & JavaScript by Tim Wright About The Authors Develop A One-Of-A-Kind CSS/JS-Based Game Portfolio BY DANIEL STERNLICHT ❧ A portfolio is a must-have for any designer or developer who wants to stake their claim on the Web. It should be as unique as possible, and with a bit of HTML, CSS and JavaScript, you could have a one-of-a-kind portfolio that capably represents you to potential clients. In this chapter, I'll show you how I created my 2-D Web-based game portfolio. 1 The 2-D Web-based game portfolio of Daniel Sternlicht . Before getting down to business, let's talk about portfolios. Before getting down to business, let's talk about portfolios. A portfolio is a great tool for Web designers and developers to show off their skills. As with any project, spend some time learning to develop a portfolio and doing a little research on what's going on in the Web design industry, so that the portfolio presents you as an up to date, innovative and inspiring person. All the while, keep in mind that going with the flow isn't necessarily the best way to stand out from the crowd. One last thing before we dive into the mystery of my Web-based game portfolio. I use jQuery which has made my life much easier by speeding up development and keeping my code clean and simple. Now, let's get our hands dirty with some code. The HTML Let's warm up with a quick overview of some very basic HTML code. It's a bit long, I know, but let's take it step by step.

DDAANNIIEELL SSTTEERRNNLLIICCHHTT

WWeebb DDeessiiggnneerr,, FFrroonntt--EEnndd DDeevveellooppeerr

AAbboouutt MMee

…… ……

The HTML is not very complicated, and I could have used an HTML5 canvas2 element for this game, but I felt more comfortable using simple HTML DOM elements. Basically, we have the main ##wwrraappppeerr div, which contains the game's elements, most of which are represented as div elements (I chose divs because they are easy to manipulate). Have a quick look at my game3. Can you detect what makes up the game view? The game view We have roads, trees, fences, water, caves, houses and so on. Back to our HTML. You'll find an element for each of these items, with the relevant class and ID. Which brings us to the CSS. The CSS First of all, note that I prepared the HTML to follow the principles of object-oriented CSS4 by determining global classes for styling, and not using IDs as styling hooks. For example, I used the class ..rrooaadd on each element that should look like a road. The CSS for the ..rrooaadd class would be: .road {

Practical JavaScript Techniques

Similar Practical JavaScript Techniques