Category: WebDesign

Useful links: Content First, Web Power Tales

Read this: Content First. Why? Because you’ll learn about current changes and trends in web design that are important to you.

danah boyd had a problem: Tumblr disappeared me. She wrote about it on her blog and within hours, Tumblr heard about it and responded.

Tumblr called me, apologized & restored my account. More details from our call on my blog: http://bit.ly/iwcUue More reflections tomorrow!Thu Apr 28 03:05:49 via webdanah boyd
zephoria

Stubbornella mentioned on Twitter that she would like a tool to automate CSS 3 Gradients. You’ll love her tale of what happened next.

ADDENDUM 4/29/2011: Today danah boyd posted a thorough and thoughful post about the rights to names/brands at A Customer Service Nightmare: Resolving Trademark and Personal Reputation in a Limited Name Space.

Review: Smashing CSS: Professional Techniques for Modern Layout

Smashing CSS: Professional Techniques for Modern Layout by Eric A. Meyer is from Sitepoint, 2011. This is a very different sort of book by Eric Meyer. Not in subject matter, of course, but in tone and purpose. Instead of his previous rather pedantic and encyclopedic listing of every thing you might ever want to know about CSS, this book is light, humorous, and organized to be read from front to back.

If you’ve been paying attention to CSS for the last few years, most of this book will be old news to you. But the book isn’t aimed for those already literate with CSS. It’s meant to help the newbie learn enough to master the basics and go on to create some cool looks and layouts with CSS. Every chapter has lots of examples, screen shots, code, and advice.

The first section starts right at the beginning with a chapter on Tools such as Firebug and SelectORacle. Chapter 2 talks about every kind of selector with advice about what works best when there is more than one way to accomplish something. The second section of the book deals with Essentials. In the chapter called Tips you learn about things like unitless line-height values, image replacement, and list styles. The chapter called Layouts reviews float containment and explains layouts like faux columns, liquid bleach, the one true layout, fluid grids, and the holy grail. In the Effects chapter he explains how to create an effect like his complex spiral. He also explains CSS pop-ups, menus, rounded corners, sprites, sliding doors, parallax, ragged floats, and constrained images.

The final section of the book is Cutting Edge, in which he moves away from reviewing the foundation CSS knowledge of the past and jumps into new ideas. There’s a chapter on Tables that shows new techniques for styling tables. He gives tips on using head, body and foot for table design and shows how to use a table to make a graph or provide data on a map. The final chapter is Cutting Edge. This chapter looks at HTML5, media queries, occasional children, occasional columns, RGBa, shadows, multiple backgrounds and transforms.

From a web education perspective, this would be an excellent book for teaching a CSS class.

Summary: A perfect book for those just learning CSS.

A review by Virginia DeBolt of Smashing CSS: Professional Techniques for Modern Layout (rating: 5stars)

Big News from Adobe

In Introducing Adobe Creative Suite 5.5 Product Family, Adobe made some announcements important to educators.

First, they are moving milestone releases such as CS3, CS4, and CS5 to a two year cycle. The in between years will get updates like the just announced CS5.5. Here’s what they are doing to the web suite.

For Web folks: huge updates to HTML5 and Adobe Flash authoring tools, enabling designers and developers to deliver mobile applications on Android, BlackBerry Tablet OS, iOS and other platforms — and create rich browser-based content across screens. All the big HTML5 checkboxes are ticked in Dreamweaver CS5.5: jQuery mobile framework integration for browser-based content, PhoneGap’s in, as well as WebKit engine updates.  We’ve also launched Adobe Flash Builder 4.5 Premium and the Flex 4.5 framework now includes mobile support.   Now hundreds of millions of mobile devices can be targeted with content and apps, created through our web tools.  Remember, Adobe tools support the development of both HTML and Flash content, don’t let crazy headlines make you think otherwise.

Secondly, they announced a subscription plan that means users will always have access to the most up to date version of the software for a monthly subscription fee. The Adobe announcement page does not show specific subscription pricing, but an article I linked to yesterday in a Useful Links post does gave a chart of subscription pricing.

Both these announcements are important to web educators, especially the news that Dreamweaver will come equipped to write HTML5.

Multiple Background Images with CSS3

There are two background images on the demo page. The page is a standard Dreamweaver HTML template page, with the styles in the document head. To add a second background image URL, the Dreamweaver style element must be edited manually.

Here’s the relevant rule:

background: url(img/Adelie_Penguin-sm.jpg) right bottom no-repeat,
#FFF url(img/bg.jpg) repeat;

You can view the results in this demo page, if your browser supports it.

If your browser does not yet support multiple background images, here is a screen shot of the Opera browser rendering of this rule.

background images demo screen shot

The various background images are in a comma separated list. The order of the images listed by url in the background rule is important. You can think of the list like layers in Photoshop or like z-index stacking. The first image in the list is at the top of the stacking order. As you add more and more background images to the list, they move to the back in the stacking order.

If the penguin image were second, it would be obscured by the repeating background. However, if the second background image were not repeating, but instead had a no-repeat placement and the top left, then both images would be visible and the listing order of the urls in the background rule would seem to be less significant. Nevertheless, it’s a good habit to keep stacking order in mind when listing the urls for multiple background images — background images in specific positions might overlap each other if the page is resized.

Useful links: HTML5 questions, Smashing newsletter, WP plugins, teens

A few HTML5 questions that need answering is from Christian Heilmann.

Did you know Smashing Magazine has a newsletter? I just learned about it and think it might be pretty good. You might want to check it out, too.

A nice new WordPress plugin from doodlebee, aka @brassblogs, for those of you who set up WordPress sites for others and want to leave them some hints and reminders is Back End Instructions. Here’s some of the description of how it works.

Using WordPress’ default posting capabilities, mixed in with some custom post types and meta fields (and a little sprinkle of magic fairy dust and a lot of prayers), you can easily create and manage instructions for each page of the back-end of your client’s site. Simply create a post, associate the post with a page in the back-end, add in your content, and voilà: a small button appears at the top of the page that expands with jQuery to show a list of “instructables” (post title links) associated with that page.

Are you watching the new series The Chicago Code? This week the leading tip on solving a crime came from a tweeting teen. danah boyd talks about tweeting teens in Tweeting Teens can Handle Public Life with her usual research-based authority.

Free eBook on fieldset CSS

The posts here on fieldset CSS are so popular, I decided to put them all together in one PDF file and offer it as a free download.

It’s a PDF file, so it isn’t perfect, but it does give you the information you may be looking for all in one place. If you have any problems with the PDF format, the posts are all available here on the blog. The included articles from the blog are:

Download Web Teacher on Fieldset CSS.

Here is the applicable Creative Commons license info.