Over the past few weeks my blog posts have been exploring different animation options available in modern browsers. First, I looked at using CSS, and then jQuery. In this article I want to take a look at a third option, Canvas, and talk about some of the advantages and limitations of working with this part of the HTML5 specification.
(more…)
Archive for the ‘Web’ Category
Exploring browser animation options: Part three, Canvas
Published by Ray Villalobos, lynda.com author | Saturday, October 6th, 2012New Adobe Muse features for Q3
Published by James Fritz, content manager, Design | Monday, October 1st, 2012A few months ago, Adobe released Adobe Muse to the public. One benefit of Muse being available by subscription only is the ability for Adobe to provide new features whenever they happen to be ready. The first batch of updates were recently released and include a combination of must-have new features and improved usability. The lynda.com Muse Essential Training course has also been updated with a number of movies that cover these new features in depth. The following is an overview of what has changed.
Ruler Guides
Muse now has the ability to create Ruler Guides, which help to align your designs. You can drag guides from the horizontal or vertical ruler onto your page, and lock, hide, move, and delete them just as you would in InDesign and other Adobe applications. For a closer look at the Muse Ruler Guides, watch the movie Using Ruler Guides, from the sixth chapter of Muse Essential Training.
Align panel
In the first version of Muse, you were only allowed to align by using the built-in Smart Guides. While Smart Guides are useful, Muse now features an Align panel that lets you align and distribute objects between one another, and to web pages themselves. For a closer look at the Muse Align panel, watch the movie Using the Align panel from the sixth chapter of Muse Essential Training.
New Font menu
The Font menu has also been rebuilt to be easier to use. Now you can search for a particular font among Web Fonts, Web Safe Fonts, and System Fonts. It even features a Recently Used Fonts section at the top of the menu. To learn more about the Font menu, check out the movie Formatting your text, from chapter seven of Muse Essential Training.
Form fields
Arguably the most important update to Muse is the ability to create and edit basic text fields as forms. These fields help you create a basic contact form that will work well if you are publishing with the website host Adobe Business Catalyst. If you use a third-party host, Muse will write the correct HTML for the forms when you export or upload. However, you will need to edit the code for the forms to work properly. Muse is still missing more complicated forms like check boxes and radio buttons, which hopefully will arrive in a future update. To learn more about text forms, watch Understanding text form fields in the eleventh chapter of Muse Essential Training.
FTP upload
The easiest way to publish a website is by using Adobe Business Catalyst as your host, but you may prefer to use your own third-party host. Until now you were required to export your website from Muse and then use your own FTP client to upload the site to your own host. With the latest Muse update, it just got easier since there is now an FTP client built directly into Muse. Simply enter your host information and upload your website inside Muse whenever changes are made.
Downloadable assets
If you have ever wanted to add a PDF, ZIP, or other file on your website for people to download, you may recall it was difficult to do with the earlier version of Muse. The updated version now allows you to add any type of file you want as a downloadable asset. When you add a file for someone to download, it is added to the Asset panel as a link. From there, you can select any graphic or text and create a link to that asset for download. When you publish your website, the file will be automatically uploaded to your host along with the code and images.
Usability and UI improvements
Sometimes the little changes can make all of the difference. Here is a list of some of the tweaks to the Muse interface that will help you work more smoothly:
- • Duplicate while Transforming: The X, Y, W, H, and angle edit boxes support duplicating and transforming a selection if you hold down the Option key (or Alt key on a PC) as you enter a value and press Enter. This functionality is similar in other Adobe apps like InDesign and Illustrator.
- • Shift+Enter: Similar to Duplicate while Transforming functionality, if you enter a value in an edit box you can do a Shift+Enter to apply the value and keep focus in the edit box. One benefit of this function is the ability to adjust your text and try several text-size values without having to click in the edit box, select all, and then type another value.
- • Drag-and-drop styles/swatches/colors: With the Muse update you can drag the following:
- -Paragraph styles onto text frames to apply (the bug where it only applied to the first paragraph has been fixed)
- -Character styles onto text frames to apply
- -Graphic styles into page items or a page to apply
- -Swatches onto a page item, page, or browser area of a page to apply background fill
- -Color onto a page item, page, or browser area of a page to apply background fill (by dragging the color preview area just above the RGB edit boxes)
- -Color to the Swatches palette to create a swatch of it
- • Rotate Cursor feedback: Added feedback to the Rotation Tracker so you see the angle next to the cursor as you rotate.
- • Rotation display values: Changed rotation display values to be between -180 and 180 to match other Adobe applications (previously it was 0 to 360).
- • Groups and widgets: Indicated with dotted line containment rectangles.
- • When a page item cannot be resized in a specific direction an X is shown instead of a missing handle.
- • Additional controls—Transform, Text, and Align: Added to the Control strip.
- • If you have a pointer, you can access Text controls in the Control strip when any item on the canvas is selected.
- • Object names report multiples in the Control Strip: For example, if one text frame is selected, the menu reports Text Frame. If multiple text frames are selected, the menu reports Text Frames.
- • Control Strip: Reports states for pages and objects, and will show a dropdown list of states applied to that object.
- • Preferences: Allows you to turn off the Hint label/tooltip.
- • An FAQ link to help users understand the implications of publishing, and alleviate their fears about what publishing means, has been added.
Code generation improvements
One of the advantages of using Muse is that you generally do not have to worry about working with HTML, CSS, or JavaScript, because code is automatically generated when you publish or export your layout. Even though you may not think about code, the Muse team spends a lot of time tweaking and improving code generation. Since these small tweaks will collectively improve the speed, performance, and optimization of your site, it is recommended that a site be re-exported/published after updating to the latest version of Muse. This update includes the following code-based improvements:
- • Updates to state-based groups, or, what happens when Muse generates a separate HTML structure for each state of a Muse page item. State-based groups can cause problems with Google Analytics as well as click-event problems. For cases where you are not rasterizing the entire page item and its contents, Muse will create a much simpler HTML structure and change the styling via CSS. Note that Muse rasterizes the entire page item and its contents in the following cases: Text frames that use System Fonts, rotated page items, and images with a Bevel or Inner Glow effect applied.
- • Shadows/glows use the CSS box-shadow property.
- • Gradients are created with CSS.
- • A Sitemap.XML file improves SEO.
- • JavaScript runtime is improved (15 percent less code).
- • Shift+Return creates a line break (<br>) instead of a hard return.
- • Internet Explorer 7 and 8 (IE7 and IE8) don’t support transparency in shadows, so Muse shadows use a tinted color matted against the page fill color for the IE7 and IE8 CSS.
List of updated and new movies to Muse Essential Training:
- Introduction
- What is new in the August 2012 update
- Chapter 2
- Understanding the current selection (update)
- Understanding the Hint label
- Chapter 5
- Adding animations from Adobe Edge
- Adding downloadable content
- Chapter 6
- Using Ruler Guides
- Using the Align panel
- Chapter 7
- Formatting your text (update)
- Working with Web Safe and System Fonts (update)
- Working with Typekit Fonts (update)
- Chapter 11
- Understanding text form fields
- Creating a simple form
- Chapter 13
- Exporting your site to HTML (update)
- Uploading your site via FTP
Green computing starts with your code
Published by Mark Niemann-Ross, content manager | Developer | Wednesday, September 26th, 2012Is a paperless society really an energy savior?
Manufacturing office paper consumes more energy than producing food, and at nearly 8 percent of US energy going to paper, even more than steel. With these statistics in mind, it’s easy to believe a paperless society would conserve massive amounts of energy. Consider: An electronic memo doesn’t consume paper, doesn’t use ink, doesn’t require a printer spinning motors, and doesn’t require a delivery truck. Some bright folks calculated the savings for sending an electronic memo over paper is about .36 kilowatt-hours (kWh), or an energy-spend equivalent to microwaving three potatoes.
The Internet has a carbon footprint
But hold on a minute—that savings assumes an electronic memo uses no electricity, which is false. According to one estimate, moving one megabyte across the Internet costs .006 kWh, or the energy contained in one very small bite of a chocolate chip cookie.
We move a lot of kilowatts across the Internet. Different groups will provide different estimates, but Cisco estimates [CA3] traffic will pass the zettabyte threshold by 2017. No matter how you run the numbers, all those .006 kWh chocolate chip cookie–sized bytes of data have an impact. Google alone used 2,259,998 megawatt-hours (mWh) in 2010. When you’re consuming this statistic, keep in mind 1 mWh can sustain 1,000 homes for one hour. Another interesting tidbit: Google estimates an Internet search consumes one-third of a watt-hour or .0003 kWh (if you’re keeping track in cookie similes, this is about a cookie crumb).
Moving data isn’t the only thing computers do; they also store data. As an example, services such as Amazon EC2 charge by demand based on processor time, and a majority of that payment goes for electricity. According to the Northwest Power and Conservation Council, at this rate these server farms will account for about 10 percent of northwestern electricity by 2030. Code costs money to run. Inefficient code costs more money to run.
Your code is the solution
So why is the content manager for the Developer segment at lynda.com bringing this up? What does this have to do with programmers? Other than turning off lights and computers, what can we do?
Plenty. Our code drives the microprocessors that use all this power. Our code makes calls to APIs that spin up central processing units (CPUs) that create thermal load that require cooling that devour electricity.
Mobile devices bring this issue into sharp focus. Unnecessary code chews up precious battery life, reducing the time between recharges. Apple banned Adobe Flash from the iPhone because of excessive battery usage. Interestingly, this battery drain seems to be related to code, not hardware. Imagine the difference if Adobe had been able to reduce the power consumed by Flash with more efficient programming.
Tips for writing efficient code
Your office has power-saving features: lights controlled by timers, setback thermostats, and paper recycling. Why not write code with the same intent? Cache data from the server and reduce the number of queries. Optimize SQL calls to produce only the results you need. Once we start looking for ways to reduce load on the Internet, we’ll see many more options.
• Profile your code to reduce unnecessary cycles. In Drew Falkman‘s PHP 5.4 New Features course, profiling is discussed and examples are provided on how to write more efficient code. Take a look at the third movie in chapter one titled Using the High Precision Timer.
• Write closer to the CPU. Instead of writing a mobile web app, consider creating a native app using Objective-C, C#, or Java. Your application will run faster, and require fewer conversations across the Internet. For more guidance, consider checking out Objective-C Essential Training, C# Essential Training, and Java Essential Training.
• Write efficient HTML. Optimizing HTML pages not only improves the performance of your website, but will also reduce the number of hits on the server and the associated load. Look at Google Webmaster Tools, or check out Bill Weinman’s HTML5: Local Storage and Offline Applications in Depth to learn more about ways to store data locally, instead of on servers.
In closing, consider this: Programmers used to fret about available memory when 16 kilobytes of ram was a big deal, and they learned to be efficient. Over time, memory has become cheap and programs have become larger, but now we face an energy shortage. Why not start considering energy conservation to be the next big programming challenge?
Your thoughts?
Exploring browser animation options: Part two, jQuery
Published by Ray Villalobos, lynda.com author | Friday, September 21st, 2012Animation can be accomplished in many ways with modern browsers. I’m currently working on a series of blog articles that explore some of the browser animation options available. In my last article, I looked at creating animations with CSS3 using keyframes and transitions. In this article, I’ll look at how to use jQuery to animate objects.
jQuery is a JavaScript library for building interactivity into web applications. One feature of jQuery is its ability to animate elements in HTML. This is quite powerful and useful because another feature of jQuery is its focus on remaining as backward compatible with older browsers as possible. This is significant because these two elements together make jQuery one of the most compatible of the animation options.
A good example of how to use jQuery animations can be found on my MexSantos MexSantos project, which is part of a creating Adaptive Website for Multiple Screens course I prepared for lynda.com.
If you click on one of the small thumbnails on the MexSantos website, you’ll see an overlay appear into view and then a copy of the photo in a larger view. The overlay animates subtly, but this is typical of the type of animation that jQuery is ideal for. Interface animations are its specialty and it handles them better than many other methods. jQuery uses JavaScript but one of its goals is to write JavaScript that is compatible with older browsers, so compatibility isn’t the problem with jQuery animations. The main issue is that jQuery animations require JavaScript, so unlike CSS they’re useless if the user has turned JavaScript off. This caveat can sometimes create usability concerns.
jQuery performs animations by modifying aspects of items on the page. For example, it can change the opacity of an image over time to make it look like it’s animated. Let’s take a look at the line of JavaScript code that adds the overlay in the MexSantos website:
#overlay {
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
One of the great things about jQuery is how commands can be chained together to create a sequence of events. In the JavaScript code above, we’ve managed to quickly create a div then assign it an ID of ‘overlay’ and append it to our body tag. To write the code that actually performs the animation, first we hide the element (otherwise animations show up immediately), and then we add a fadein() command. The fadein() method takes whatever the object is normally supposed to look like (based on CSS style sheets) and performs an opacity fade-in.
The CSS for the overlay ID is pretty simple: A black background with a fixed position that takes on the width and height of the entire window.
#overlay { background: #000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; } To really understand what jQuery is doing, you need to look at the code as it animates. If you’re using a browser like Google Chrome with a dynamic code view, you should be able to right click on the background of the page and choose inspect element. Once you have inspect element open, make sure you’re in the elements tab and click on one of the thumbnails. Quickly look at the line before the closing tag. It should show the div being added dynamically and an opacity attribute with rapidly changing values.
The animate() method
There are a lot of other animation methods that can be used in addition to fadeIn(). Of course, where there is a fadeIn(), there logically is a fadeOut() method, but there are also others like slideDown(), and slideToggle(). Once you learn how to use one, the rest are pretty easy to pick up. There is also a generic method called animate() that allows more granular control over how animations are performed. These animation methods usually take parameters and callbacks as well. I’ve created an example that extracts the overlay functionality of the MexSantos website and shows how the generic animate() method can be used to control the CSS in objects.
Here, we start off with an image that has a click event bound to it:
$('img.fooditem').click(function(e){
});
When someone clicks on the image, the fun starts. First, animate this element out of view with the animate() method, which allows you to change any CSS properties you want. For example, rather than just changing the fade, you can change the opacity as well as the position of the object.
//default animation for element
$(this).animate({
opacity: 0,
top: '+=200'
}, 500);
As part of the process, the animate() method takes in a JSON object that lets you modify CSS settings like the opacity and position of the element. You can also set the amount of time (for example, 500) you’d like the animation to take. jQuery has some predefined constants for animations such as fast and slow. Just like with the MexSantos example, we can add the overlay:
$('<div></div>').attr('id', 'overlay').appendTo('body').delay(300).hide().fadeIn(500);
We’re adding some delays because we want the animation of the image moving out of view to play before our overlay starts showing up. Now we can load the large version of the image:
$('<img>').attr('src',largeimage).attr('id', 'overlayimg').appendTo('#overlay').load();
With the large version of the image added, we need to know what to do once someone has finished looking at the overlay and clicks to return to the menu. We need to bind a click event to the overlay just like we did with the image, use the fadeOut() method to hide the overlay, and remove it from the page:
$('#overlay').click(function(e){
$('#overlay').fadeOut('slow', function() {
$(this).remove();
}); //fadeOut
}); //overlayclick
Finally, we’ll animate the image back into its original position.
$('img.fooditem').animate({
opacity: 1,
top: '0'
}, 500);
Conclusion
Animating with jQuery is like buying a car that is a “mechanic’s dream.” You really need to know your way around JavaScript, but there’s a real benefit in the backward compatibility with older browsers you gain. Using jQuery for browser animations is a strong route to take when working with complex interface interaction. Once you learn a few key concepts like binding methods and chaining commands, this type of animation actually becomes quite fun.
If you’re interested in writing code with jQuery, make sure you check out some of our offerings on jQuery animation in the lynda.com training library.
Exploring browser animation options: Part one, CSS3
Published by Ray Villalobos, lynda.com author | Saturday, September 8th, 2012There are lots of ways to get animations to play in modern browsers. With so many options, it can be tough to determine the best way to tackle a specific project. Should you use CSS3? Is it better to use jQuery? What about Canvas or Canvas based libraries like Easel.js? In this series of articles, I’ll compare and contrast some of the different technologies behind web animations, show how to code sample animations, and note advantages and disadvantages behind each. We’ll get started with CSS3 animations.
CSS3 Animations
First and by far the easiest way to move things in a browser is to animate DOM (Document Object Model) elements using CSS3. On some platforms the animations are GPU (Graphics Processing Unit) accelerated, which makes then faster, especially when animating 3D transitions on mobile devices. Because the animations are done with CSS, no JavaScript is required, although you can still use it to add interactivity to your animations.
Demo
Note: I added a button and a bit of jQuery to the example above so you can start and stop the animation in the JSBin example above. I’m just discussing the essentials of the animation without those elements below. I’m using -webkit prefixes here for brevity, so this example is only going to work in WebKit browsers like Safari or Chrome.
. If you want to be compatible with more browsers, make sure you add the other prefixes. Check out CSS3 Please for more info.
Let’s take a look at how these are done. We’ll start off by creating an IMG tag and pointing that to a small photo. We’ll add the startspin class so we can target it with CSS later.
<img id="startspin" src="http://i.imgur.com/n3Uvf.png" />
Then, it’s time to add some CSS to animate this. CSS animations are done in two parts, first of which is creating a series of keyframes, much like what you would do with any timeline-based program like Adobe Edge or After Effects. Let’s create the keyframes:
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(-360deg) scale(1.5);
opacity: 0;
}
50% {
-webkit-transform: rotate(30deg) scale(.8);
}
}
We can use a percentage with different values to indicate at what point in the time our elements (in this case the IMG) should transform (0% and 50%). Inside curly brackets, we then we can use transform attributes to modify our element. In the example above, I rotate the object and scale it. I’m also adjusting the opacity as a separate property/value pair. You can use different transformations like this.
Notice that you don’t need to include a keyframe for 100%. The object will animate from the transformation at 50% to whatever the image is supposed to look like when it has no transformations.
Once you have a series of keyframes, it’s time to assign these to a CSS class or an ID. So you can attach the animation to an element in the DOM (in our case, an image), plus control how the animation plays.
.startspin {
-webkit-animation: spin 2000ms ease-in-out;
}
This adds the animation to the startspin class, which we attached to the image tag already, so the animation will execute when the image loads.
The animation property is a shorthand for six of CSS3′s animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. You can pass a number of options to the property, and in my example, I’ve specified that this animation will be using our spin keyframes, that the animation will last 2000 milliseconds (you can use s instead if you want to specify seconds) and that it will be using an easing function called ease-in-out that will make it animate slowly at the beginning and at the end. If you’ve worked with animation in other software, these should be pretty easy to pick up. Otherwise, check the CSS3 animation documentation.
Another example
In this example, I’m using JavaScript to control what happens when someone clicks on the image, which causes a second set of keyframes named pulse to take over the animation. You can use the keyword infinite to have an animation play repeatedly forever (which might get obnoxious quickly, so use with caution), or simply specify a number of times you want the animation to play.
Limited primitives
Unfortunately for CSS3, there are very few graphic primitives (native ways to draw shapes) in the language. You can create a box, or if you make a box have 50% borders a simple ellipse, but that’s pretty much it, so you wouldn’t want to build a game with CSS animations. However, you can bring in any type of graphic your browser will accept like SVG, JPG, and PNG files and they will animate fine with CSS.
Vendor prefixes
One of the huge disadvantages, and, frankly, the Achilles heel to working with CSS3 animations, is that in order to get CSS to work with as many browsers as possible, we should include vendor prefixes like -webkit (safari and chrome), -moz (Firefox), -o (Opera) and of course the property without the prefix. This is a huge problem because animations use a large number of property combinations that all need prefixes. If you take a look at just transforming an object by 30 degrees, here’s the code you’d need for that.
-webkit-transform: rotate(30deg); /* Safari 3.1+, Chrome
-moz-transform: rotate(30deg); /* Firefox 3.5-15
-ms-transform: rotate(30deg); /* IE9+
-o-transform: rotate(30deg); /* Opera 10.5-12.00
transform: rotate(30deg); /* Firefox 16+, Opera 12.50+
And that’s just one property. Not taking into account what you have to do to create your keyfames, which for a simple fade would look something like this:
@-webkit-keyframes fade {
0% { opacity: 0.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
@-moz-keyframes fade {
0% { opacity: 0.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
@-o-keyframes fade {
0% { opacity: 0.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
@keyframes fade {
0% { opacity: 0.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
To expect someone to do a complex animation using all of the prefixes is unreasonable, and that’s why most of the examples you’ll see online use -webkit prefixes, target a specific browser or are done by super hardcore coders. There are some JavaScript frameworks Like Lea Verou’s Prefix Free that can help with this, but I don’t foresee a lot of people using CSS3 animations as their primary animation method until years from now—if ever. There are just easier and better ways.
Progressive Degradation & Compatibility
Whenever you work with any CSS3 properties, you should check browser compatibility and make sure that whatever code you end up using isn’t essential to the functionality of your website. Users with older browsers shouldn’t still be able to use and view your site even though they might not get all of the animation sugar.
Here’s a compatibility table from Can I Use:
If you want to learn more about CSS animations, I’d suggest watching my course IOS Web Applications with HTML5 and CSS3.
CSS pre-processors part two: Mixins and nesting
Published by Ray Villalobos, lynda.com author | Monday, August 27th, 2012In my last article, An Introduction to LESS and Sass pre-processed CSS languages, I wrote about using variables with CSS pre-processors. Having the ability to use variables will save you enough time to justify learning pre-processors, but there are two other features in Sass and LESS that will save you even more time: nesting and mixins.
Sass versus LESS
Pre-processors allow you to code in a language that’s similar to CSS, but with additional features. Most people are on the fence about adding them to their repertoire because there are two competing high-profile standards: LESS and Sass.
I remember having a similar problem a few years ago trying to decide between jQuery mobile and other JavaScript libraries. Sass and LESS are so similar that it almost doesn’t really matter which one you learn. Switching in between them is pretty easy, so ultimately it’s learning about the concepts that matters. Yes, there are some features specific to each language like guarded mixins in LESS and conditionals in Sass, but I imagine that as the languages develop further, they will each keep up with the other.
Pick one
The important thing is what you plan to do with the languages. If you’re planning to use a framework like BootStrap, from Twitter, then it’s a good idea to go with LESS because Boostrap was written with LESS. If you want a nearly identical framework that uses Sass, check out Foundation. Although Sass requires you to install Ruby, you’ll want to use something like CodeKit to manage your pre-processors.
My advice: Pick one framework and get good with it.
Before we start coding, keep in mind that when I’m talking about Sass, I’m speaking of the newer version with an .scss extension. It’s easier to learn for CSS users because it lets you use CSS syntax and style you may already know.
Nesting
Besides variables, another awesome thing you can do with pre-processors is nesting. Let’s say you’ve developed a simple horizontal nav bar for your site.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Info</a></li>
</ul>
Here’s a typical way to write CSS to make this into a nav bar:
ul {
margin: 0;
padding: 0;
font: bold 1em/1.2em Helvetica, Arial;
}
ul li {
list-style: none;
}
ul li a {
float: left;
background: #BA0436;
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
ul li a:hover {
background: #EEC25C;
color: black;
}
As your CSS file gets bigger, the number of styles that are children of other styles increases. In either Sass or LESS, you can do the same thing, like this:
ul {
margin: 0;
padding: 0;
font: bold 1em/1.2em Helvetica, Arial;
li {
list-style: none;
a {
float: left;
background: #BA0436;
text-decoration: none;
color: white;
display: block;
padding: 10px;
&:hover {
background: #EEC25C;
color: black;
}
}
}
}
This way, the li selector is written inside the ul selector and the a selector is inside the li selector as if they were another rule. Notice that because we are using a pseudo-class, I have to add the ampersand (&) before the :hover selector.
Nesting doesn’t necessarily save you a ton of time, but it makes your code cleaner. When coding CSS, designers can sometimes add new rules where they don’t belong: nesting helps you keep everything tidy.
Both Sass and LESS implement mixins the same way, so there’s no need to show you the difference between the two.
Mixins
If you liked variables, you’re going to love mixins. They are snippets of code you can reuse over and over in your CSS. You can use them with variables to make coding in CSS easier. Let’s take a look at how you would code a simple top-to-bottom gradient using regular CSS.
.mybox {
background-color: #333745;
background-image: -webkit-gradient(linear, left top, left bottom, from(#DAEDE2),
to(#77C4D3));
background-image: -webkit-linear-gradient(top, #DAEDE2, #77C4D3);
background-image: -moz-linear-gradient(top, #DAEDE2, #77C4D3);
background-image: -o-linear-gradient(top, #DAEDE2, #77C4D3);
background-image: linear-gradient(to bottom, #DAEDE2, #77C4D3);
}
To make sure the gradient displays in as many older browsers as possible, we have to include code for different versions of Safari, Google Chrome, Firefox and Opera. It almost makes you want to stop doing gradients in your CSS. We can use variables to simplify this. Let’s try that with a Sass example.
First, we’ll create two variables for the colors somewhere in our .scss file:
$from: #333745;
$to: #77C4D3;
Once we have that, we can modify our gradient to use the variables:
$from: #333745;
$to: #77C4D3;
.mybox {
background-color: $from;
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top, $from, $to);
background-image: linear-gradient(to bottom, $from, $to);
}
Modifying the gradients to use variables works great and it will save you a lot of time. But what if you wanted to reuse this for other declarations? That’s where mixins come in. You can create snippets of code and reuse them. Let’s create a mixin for linear gradients using the code above as a base.
$from: #333745;
$to: #77C4D3;
@mixin lgradient {
background-color: $from;
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top, $from, $to);
background-image: linear-gradient(to bottom, $from, $to);
}
This makes working with gradients more manageable, but it will only work with one set of from/to colors. We can easily improve on this by putting these variables within our mixin. If you know JavaScript, this is like writing a function. Here’s the syntax in Sass.
@mixin lgradient($from: #333745, $to: #77C4D3) {
background-color: $from;
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top, $from, $to);
background-image: linear-gradient(to bottom, $from, $to);
}
Now, when we want to use our gradient in our box, we can just type the following:
.mybox {
@include lgradient;
}
Adding this line of code will create the gradient with the default colors, but since they’re variables, you can create any top-to-bottom linear gradient and specify the colors in your .scss file.
.mybox {
@include lgradient(#FCC,#FEE);
}
Now you have an easier way to create gradients. Let’s check out the code in LESS:
.lgradient(@from, @to) {
background-color: @from;
background-image: -webkit-gradient(linear, left top, left bottom, from(@from),
to(@to));
background-image: -webkit-linear-gradient(top, @from, @to);
background-image: -moz-linear-gradient(top, @from, @to);
background-image: -o-linear-gradient(top, @from, @to);
background-image: linear-gradient(to bottom, @from, @to);
}
.mybox {
.lgradient(#CCC,#DDD);
}
Pretty similar, except that the dollar signs ($) are replaced by @ symbols and there is no mixin keyword. You can see how pre-processors will help you write CSS more efficiently. If you haven’t already taken the plunge, what are you waiting for?
Interested in more?
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com
Suggested courses to watch next:
• CSS: Core Concepts
• CSS Fundamentals
• CSS3 First Look
• Managing CSS in Dreamweaver
Adobe Edge Animate Preview 7: What’s new?
Published by Ray Villalobos, lynda.com author | Thursday, August 23rd, 2012A new version of one of my favorite projects from Adobe has just been released, and it has a new name: Adobe Edge is now Adobe Edge Animate. There’s a lot more under the hood than a name change. In this article, I’ll take a look at some of the changes from the previous version so you’ll be oriented when you install the new release.
What’s in a name?
Edge is now Edge Animate. The name clarifies one of the main features of the program. You could argue that it does a lot more than animation, but names like Photoshop, Illustrator, and InDesign clearly convey the focus of the software; Edge by itself didn’t. People who like to shorten things will still call it by its old moniker, but at least the new name makes things clearer in a branding sense.
UI beautification
Edge Animate is a little more colorful than before. There are subtle changes here you might not notice unless you pull up the Preview 6 and 7 side by side.
A little color can go a long way to liven things up. The application looks a lot better. The palette used in the panels looks brighter and some of the labels and icons have changed.
Properties panel
One of the biggest changes is the redesign of the Properties panel. Everything is a little cleaner and less boxy than before with more subtle pop-ups. For example, the ability to choose whether an imported image is coded as a DIV or an IMG is now embedded within the name of the element and disappears when an item that doesn’t need it (like a rectangle) is selected.
An additional pop-up is next to the name of the element where you can type in a custom class for the item.
There are now many more options for creating keyframes directly from the Properties panel, which can be quite useful and are a welcomed addition. Overall items have been moved and rearranged.
Visibility options
Visibility/overflow, opacity, and transparency form a new grouping at the very top of the panel followed by position and size below.
Responsiveness
The web has moved toward a responsive design approach, more and more widths are now specified as percentages instead of pixels. Edge Animate is one of the first animation programs that provide for a way to align things to a responsive Grid. You can specify proportionate measurements to just about everything starting with the stage.
If you create a new document, check out the Properties panel on the left of the workspace. Next to each of the two dimensions (width and height), you’ll see a switch to turn responsive dimensions on. Once you do that, you’ll notice the option to resize the stage on your rulers. In other words, the stage itself is now resizable and responsive. There is now also an option for setting up a minimum width and height.
If you have an element onscreen, you can specify either the position (x/y) or the size (width/height) in percentages. When you specify a position in percentages and resize the screen, your element will move as the size of the screen changes. If you specify a dimension, it will resize as the screen changes. A preset pop-up is also available, which makes this even easier for you (see above).
On top of the position and size measurements, you’ll see options for how these measurements are applied. On the left you’ll find a small rectangle that controls how an object is aligned to the stage. By default, when the stage is resized, objects will align to the top left of the stage. By clicking on these squares you can change the alignment to the top, right, bottom, or left.
Next are some tabs that let you see global versus local measurements. Normally these will stay the same, but if you apply transformations, the values will be different for global/local coordinates and sizes. For the most part, you don’t have to mess with these and they work as you’d expect.
You can also set the defaults for how an element is positioned onscreen by going to the Layout Presets pop-up on the right side of this section.
Minimum width and height controls
At the bottom of the Position and Size section of the panel, there’s a pop-up control that expands to let you add minimum and maximum values for the width.
If you’re confused about these options, you can watch the video on resizing that has been added to the list of tutorials when you first open Edge Animate.
Drop shadows
Preview 7 adds drop shadows to the list of object properties and there is a Shadow section in the Properties panel where you can set the parameters.
You’ll see traditional controls for the position and the shadow blur that you’d expect in a program with CSS underpinnings. At the top of the section there’s an option to use either regular or inset shadows.
Like the shadow controls, clipping is now activated by a toggle but works pretty much the same as before.
Accessibility
A new Accessibility section at the bottom of the Properties panel lets you set some accessibility options that allow you to add a title attribute to elements as well as set the tab-index. Nice to see that Adobe is thinking about accessibility in its applications.
View menu
Some of the menus have changed, most notably the View menu with the addition of options for turning on rulers and guides, plus snapping or locking guides.
Modify menu
Under the Modify menu, and by right-clicking on Stage objects, you can now group elements into a DIV, which places them inside a container in the Elements panel. Grouping items and DIVs will make it easier for you to move them around on the stage, but will not let you resize them as a unit. To do that, it’s easier to just convert them into symbols.
Timeline menu
There are a few new options under the Timeline menu. You can jump between keyframes quickly by choosing Go to Previous Keyframe or Go to Next Keyframe (or by using the menus). There are also a couple of options for removing transitions without removing the keyframes or adding transitions between existing empty keyframes.
Tools panel
A welcomed addition is a brand-new drawing tool: the oval. You could create an oval before by using the rectangle and modifying the corners, but it’s nice to see another drawing tool since the list of what’s available is sparse.
Another new addition is a Layout Defaults pop-up for choosing some of the properties of new objects. You can find these in the Properties panel, too.
Timeline panel
You can now turn on vertical gridlines in the timeline by clicking on an icon at the bottom of the timeline. The grid will help you align animation to different points in the timeline.
Also, the Instant Transition Mode icon is now different and has been renamed “Auto Transition Mode.” It lets you create immediate changes in transitions. Love the new icon.
Icons in Elements panel
Like in the new version of Freehand and other Adobe software, layers now have an icon next to them that shows you the type of element on this layer. Another small, but nice change.
Workspace bar
There are some minor changes at the bottom of the workspace: an icon on the far left that centers the workspace, and next to it a scaling pop-up that lets you type in or click and drag a value to zoom in and out on the stage.
Notifications
Edge has a brand-new notification system. When you make a coding error or experience a possible problem with one of your documents, a notification icon will appear at the bottom right of the stage. If you click on it, more information about the error or warning will appear.
Coding changes
There are some new events available: mouseenter, mouseleave, and focus events. You can add them to your elements and trigger whatever actions are appropriate for your project. Edge also allows you to better trap errors; you can catch them in your code with the Stage.onError event.
Notifications related to code errors will also appear in the code window.
Final thoughts
Edge Animate is looking more and more like a finished product. I’m really impressed with the responsive layout features. I wondered how layout programs would adjust to a responsive world and Edge has gotten it right. Way to go, Adobe.
Interested in more?
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com
Suggested courses to watch next:
• Edge First Look Preview 6
• Up and Running with Adobe Creative Cloud
• CSS3 First Look
• Managing CSS in Dreamweaver
How to build a list-based app with jQuery Mobile
Published by Ray Villalobos, lynda.com author | Saturday, August 11th, 2012In this tutorial, I’ll show you how easy it is to create a list-based app with the jQuery Mobile framework in just a few minutes, and hopefully encourage you to give it a try.
jQuery Mobile is an excellent way to create web applications for mobile devices, but it suffers from a bit of a PR problem. When I first learned about the framework, I put it on my list of technologies I should investigate, but I figured that because it’s based on jQuery, I’d have to be a jQuery expert before I could use jQuery Mobile. I found that nothing could be further from the truth.
All that is needed to use the framework is some basic HTML knowledge. In addition, because the framework is built on top of jQuery, you get all of the functionality of jQuery in a way that is easily accessible.
What is the jQuery Mobile Framework?
jQuery Mobile is a framework for developing web applications for touch-optimized devices. A framework gives you a structure or methodology for doing something—in this case, for developing web applications.
Although you can use HTML and JavaScript to develop mobile-optimized sites, you’ll quickly run into some serious problems: Different devices and browsers treat your code differently, so you have to write a bunch of JavaScript to overcome device orientation and other issues. You also have to create styles for different items like list views, dialogs, toolbars, and so on. jQuery Mobile does all of that for you. It creates a code base that handles differences between devices with support for a large range of devices.
A quick example: a list-based app
So let’s get started with a quick example. I’m going to build a list-based app that will show a selection of photos. I’ll start with some super basic starter code for a normal page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ListApp</title>
</head>
<body>
</body>
</html>
This is pretty standard HTML code. Let’s add a header section to our body:
<div id="header">
<h1>My Photos</h1>
</div>
And of course, we’ll need a footer. I’m going to add a navigation with fake links to some other potential pages:
<footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Info</a></li>
</ul>
</nav>
</footer>
Now we need some content. To keep things short for this article, I’m going to add just two photos to the mix, but you can add as many as you like. Since this is a list-based app, I’ll put the photos inside a list.
<article>
<ul>
<li>
<a href="#">
<h1>Miniature Doberman Pincher</h1>
<img src="images/doggie_tn.jpg" alt="Min Pin" />
<p>This is what happens when a
friend brings a dog to the studio.</p>
</a>
</li>
<li>
<a href="#">
<h1>Gummy Bears</h1>
<img src="images/gummies_tn.jpg" alt="Gummy Bears" />
<p>Three different poster boards...mirror for reflection,
black for background white for highlights</p>
</a>
</li>
</ul>
</article>
We encased our list inside an <article> tag, and inside each list item we have a link, which will eventually take us to a large version of our image and then a headline, a thumbnail, and a short description.
So far this is just a regular HTML page. Let's now add the jQuery library. Since the app is based on jQuery Mobile, we’ll need to add that library too, as well as some styles that the library needs. The easiest and recommended way to do this is to copy three lines of code from the jQuery Mobile Download page.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
You can put this code in between the <head> tags in your document (not to be confused with the <header> tags). These three lines tie in the CSS, the jQuery Mobile library, and the jQuery library. If you preview the page now, you’ll be able to see some slight differences in the look of the page. The background will be gray, and the fonts will be different. Not too exciting, but it means the library is already working. Here comes the exciting part.
Formatting a list view
Modifying our list so that it gets mobile device functionality is super easy: we just need to modify our <ul> tag to read like this:
<ul data-role="listview">
Your page should look something like this:
From someone who has written the CSS necessary to make a list look like this photo, this library has already saved me a ton of time.
jQuery Mobile uses the data-role tag to assign roles to regular HTML elements on a page. The reason it can do this is because of a really cool feature in HTML5: the ability to add a data-whatever attribute to any tag and store information that you can use to style elements and create interactivity.
Making the list searchable
For an even more impressive example of what the library can do, try modifying your <ul> tag like this to make your list searchable:
<ul data-role="listview" data-filter="true">
You should see a search box appear on top of your list. Start typing the word gummy into the search box and you’ll see that the list only displays one item (the one with the text gummy bears in the title). jQuery Mobile does all of that for you automatically.
Formatting Headers and Footers
Let’s add some of the other tags that tell jQuery Mobile to format things in a more mobile-friendly fashion.
Content in jQuery Mobile is normally placed inside a data-role="content" section. We can add that to our <article> tag.
<article data-role="content">
Let’s also fix up the header. We’ll use data-role="header" in the <header> tag.
<header data-role="header">
Next, we'll fix the footer. Modify the <footer> tag like this:
<footer data-role="footer" data-position="fixed">
Not perfect yet, but this shows a big improvement. Our header looks like a mobile device header, our search bar and list are nicely formatted. Notice that I’ve added the data-position=“fixed” attribute to the footer. That places the footer at the bottom on mobile devices. Our footer looks good, but the links could look better. Let’s make them look like buttons on a mobile device.
Modify the <nav> tag in the footer to read like this:
<nav data-role="navbar">
Our application is looking great; however, we could really use some icons on the navbar links. jQuery Mobile lets us easily add icons by adding a data-icon attribute to links by modifying our list items like this:
<li><a href="home" data-icon="home">Home</a></li>
<li><a href="Photos" data-icon="grid">Photos</a></li>
<li><a href="Info" data-icon="info">Info</a></li>
With just a few attribute tags, we’ve added mobile functionality to a page that would have taken hours to write and style otherwise.
Multiple Pages
So far, we’ve built a single page app. If you want to create an app with multiple pages, you have to wrap each page with a tag, use the data-role=“page”, and add an id so that we can link to that page.
Before the <header> tag add the following line of code:
<div data-role="page" id="photos">
And don’t forget to close it underneath the <footer> tag:
</div><!-- Page Photos -->
I always add a comment because when working on a large jQuery Mobile project, I use a lot of <div> tags and it’s nice to know what the closing tags belong to.
Now that we have a page, let’s add a page for each of our photos:
<div data-role="page" id="dog">
<header data-role="header">
<h1>Min Pin</h1>
<a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img src="images/doggie.jpg" class="fullscreen" alt="Min Pin" />
</div><!-- Page Dog -->
<div data-role="page" id="gummies">
<header data-role="header">
<h1>Gummy Bears</h1>
<a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img src="images/gummies.jpg" class="fullscreen" alt="Gummy Bears" />
</div><!-- Page Gummy Bears -->
The code is pretty similar to the photo list page with some important changes. First, there is no footer on these pages, since they will just display the photos. Second, we added a header with a link back to the home page—note the data-iconpos attribute on that link. You can control the position of the icons on buttons with this attribute, or you can turn the buttons off altogether using notext as a value. The button on the header is linked to our photos page.
I’ve also added a class of fullscreen to my photos. This is not a jQuery Mobile class, but something I’ve added manually because I want the photos to display full screen, so eventually I’ll add some CSS for that further down. First though, we need to link the items in our list view page to our new pages. Modify the list like this:
<li>
<a href="#dog">
<h1>Miniature Doberman Pincher</h1>
<img src="images/doggie_tn.jpg" alt="Min Pin" />
<p>This is what happens when a
friend brings a dog to the studio.</p>
</a>
</li>
<li>
<a href="#gummies">
<h1>Gummy Bears</h1>
<img src="images/gummies_tn.jpg" alt="Gummy Bears" />
<p>Three different poster boards...mirror for reflection,
black for background white for highlights</p>
</a>
</li>
Our app is almost done. Now, right before the closing </head> tag at the top of our document, let’s add the style to make sure our photos fit.
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
Our app is now ready. You can take a look at the finished jQuery Mobile app here.
Interested in more?
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com
Suggested courses to watch next:
• jQuery Mobile Web Applications
• jQuery Mobile Essential Training
• Mobile Web Design & Development Fundamentals
• HTML5: Structure, Syntax, and Semantics
