Take Your CSS to the Desktop with Adobe AIR!
Take Your CSS to the Desktop with Adobe AIR!
|
|
Here is an article that you may find useful.
Designers would find it surprising that to know that you can now take your HTML and CSS skills and use it to create desktop applications. This now very much possible for anyone who is willing to explore the power of Adobe AIR. Andrew Tetlaw has a nice little article over at SitePoint entitled Take Your CSS to the Desktop with Adobe AIR!. It provides a good, short introduction to Adobe AIR and how easy it is to use your web development skills to create rich cross-platform desktop applications.
For further reading, you may wish to check out Akash Mehta’s winning article, Walk on AIR: Create a To-do List in Five Minutes.
Similar Posts
- Mozilla 1+
- Netscape 7+
- Opera 7+
- Safari build 60+
- OmniWeb 4.5+
- Konqueror 3.2+
- IE 5.5+ on Windows (using DHTML behaviors)
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
- AJAX application that allows visitors to enter their own responses, and generates a graph that shows where the respondent is in relation to others
- Quick summary that shows the highest and lowest result per question
- AJAX application that allows visitors to filter, sort, and sift through the data
- Side-by-side comparison of 2008 and 2007 data
CSS Sticky Footer
If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
CSS Sticky Footer is developed by Steve Hatcher, and is based on the Exploring Footers article from A List Apart, and takes suggestions from Cameron Adams’ footerStickAlt, and The Pure CSS Footer example from lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts.
Far from being perfect, it does have its share of issues. The first one deals with margins, which can easily be solved by changing margins to padding instead. The second one deals with the use of relative font sizes such as % or em, something which many of the more advanced CSS gurus like me are very much fond of. The author suggests using px instead, which many find unacceptable.
To get started, check out the HowTo page for details on how to implement the CSS Sticky Footer.
Interview with Chris Wilson
Vitamin has an interview with Chris Wilson, Group Program Manager of the Internet Explorer Platform team at Microsoft. They’re not calling it a podcast, but I’m going to. (Being a podcaster myself, I’m capable only of speaking in hip web terminology.) At just over 5 minutes, it’s a quick and easy listen.Topics discussed include: the new features of IE 7, Microsoft’s involvement with the Web Standards Project, and the process of updating to IE 7. Chris WIlson’s turn-ons include: RSS, Flickr, and working closely with the web development community.Read | Permalink | Email this | Linking Blogs | Comments
8 Of The Best Free CSS Tutorial Videos
Below is a collection of the best videos on CSS available on the web, hand-picked personally by me.
Short Introductory Videos
Using CSS by Joseph Lowery (03:43)
This video explains what cascading style sheets (CSS) are. You learn the basics of CSS and the primary interfaces in Dreamweaver to work with CSS. You learn how to apply basic CSS to a web page that contains text using Dreamweaver; specifically, you create and embed a new CSS rule for a heading and paragraph
Introduction To CSS Editing Using Firebug by Jim Plush (3:17)
The firebug firefox extension allows you to edit in real time your CSS code. Instead of having to make a change, reload, make a change, reload you can just edit it live to see the results.
Basics With Sample Code
Introduction to CSS by Heather James (15:26)
Good basic introduction to CSS. In the first half of the video, she explains what CSS is and its basic concepts. In the second half of the video she shows us some examples. At one point she even uses Firebug. Cool!
Creating Beautiful Interfaces with CSS by Douglas Bowman (01:02:51)
Drop-down menus and sophisticated interface elements have traditionally been implemented using JavaScript and kludgy coding workarounds that often don’t work. It’s increasingly practical to deliver rich, beautiful, functional interfaces using semantic markup and CSS. Learn how modern markup can deliver great Web interfaces that are fast and reliable.
Basic HTML and CSS Tutorial. How To Make Website From Scratch by Jimmy Ruska (39:20)
A good basic tutorial on HTML and CSS. The first 10 minutes covers mostly basic HTML. Skip to the 9-minute mark to go straight to the CSS portion of the video.
Introduction to CSS by Stefan Mischook
A good, free video tutorial by Stefan Mischook of Killersites.com
Full Website Conversion Videos
100% CSS Web Design Series by Psmeg
A series of videos which details how to create a pure CSS based website using Adobe Dreamweaver. The series is composed of 9 parts nonetheless it is quite good and very easy to follow.
Converting a Photoshop Mockup Series by Chris Coyier
How to convert a website designed in Adobe Photoshop to HTML/CSS. Following the success of the first video series, Chris Coyier has come up with another video using a minimal version of the CSS-Tricks website.
Pure nested CSS menus
HowToCreate.co.uk has an interesting guide to creating a purely CSS-based nested-list menu. This technique uses absolutely no Javascript except for IE 5 for windows. Here is the list of supported browsers:Some browsers that don’t support this technique display styled nested-lists instead. Go check it out.Read | Permalink | Email this | Linking Blogs | Comments
How to Size Text with CSS: Create User-friendly Web Site Font Sizes …
This tutorial will show you one possibility that can meet those needs by using CSS relative font sizing. What about browser support? See Cross-browser, Cross-platform Fonts Testing.Adobe - Developer Center : Using the 3D Rotate command in Fireworks CS3
CSS Advisor (browser bug fixes) Exchanges (share components) Adobe Labs. Adobe Open Source … 3D Rotate may look like a command panel but it’s pretty much …
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.
How does your design approach affect accessibility?
In an article entitled “Visual vs. Structural,” Tommy Olsson compares the two most typical - and often competing - web design approaches: visual design and structural design. The balanced and well-written article makes the point that while there are often no major differences in the code produced from one design approach or another, using a structural approach can result in more accessible sites. While I hesitate to use such loaded words as “better,” I definitely agree that structural design can contribute to a product that is more scalable, easier to maintain, and more accessible. (I say this from the perspective of someone who has employed both approaches at one time or another.) And remember, “accessibility” doesn’t just mean “blind people.” As the web moves away from being confined to the desktop computer, accessibility is as much about accommodating mobile technologies as it is about making sure content is available to disabled users.Read | Permalink | Email this | Linking Blogs | Comments
CSS Friendly Stacked Bar Graphs
Looking for a good, CSS friendly Stacked Bar Graph implementation? Look no further as Stephen of The Wojo Group has published their implementation, which is being used in Backbone, a CMS that runs on Ruby on Rails. It is based off Alen Grakalic’s Pure CSS Data Chart, and the awesome thing is that it is semantically correct, so it will definitely look good in screen readers.
Survey For People Who Make Websites 2008 Results Out
Back in 2007, the staff of A List Apart and An Event Apart conducted a survey and presented 37 questions to 33,000 web professionals, providing “the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide” (ALA 2007 results). The results were compiled into a downloadable PDF file.
In 2008 they did it again, the results of the 2008 Survey For People Who Make Websites are now out for public consumption. The survey had less respondents compared to the one held in 2007 down to 30,055. Data analysis is provided by Alan Brickman and Larry Yu. The results speak can be overwhelming for some. Thankfully the findings are presented in a friendly, easy to read article with clear and beautiful CSS Charts.
ALA has generously shared the raw data with the community, which is available as tabbed text, CSV, and Excel spreadsheet. RAW data is a powerful thing, and I just have a couple of suggestions how it can be used:
All in all, big props to the ALA team for the tremendous effort spent on this endeavor. It is a great contribution to the web community. Looking forward to the 2009 survey!