The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Feb
3
PBS 8 of X – CSS Positioning
Filed Under Computers & Tech, Software Development on February 3, 2016 | 5 Comments
In the previous instalment we learned about the CSS box model. Each HTML tag is represented as a box within the browser, and those boxes stack down the page, and inside each other to build up the web pages we see. We also learned how to use FireFox’s developer tools to actually see and inspect the boxes. In this instalment we’ll learn how to take one or more boxes out of the normal flow of the page, and position them elsewhere on the page.
Jan
21
PBS 7 of X – More CSS
Filed Under Computers & Tech, Software Development on January 21, 2016 | 4 Comments
In this instalment we’ll build on our basic understanding of CSS from previous instalment. We’ll start with some new CSS selectors, in the process, introduce two new HTML tag attributes, then we’ll move on to the CSS box model. Each HTML tag is represented in the page as a box, and all those boxes can be manipulated with CSS.
Jan
8
PBS 6 of X – Introducing CSS
Filed Under Computers & Tech, Software Development on January 8, 2016 | 5 Comments
We have now learned enough HTML to encode basic page content, marking things as headings, paragraphs, lists, etc.. We have completely ignored the look of our pages so far – relying on our browsers’ default styles. The default styles, it’s fair to say, are pretty darn ugly, which is why almost every page on the web has at least some basic styling applied to override these defaults.
In the bad old days, HTML pages were styled by adding attributes directly into the HTML tags. This was very time-consuming, and it greatly reduced the re-usability of the HTML markup. Those attributes still exist in the HTML spec, but we have completely ignored them, and will continue to do so for the entire series. This is not the bad old days, so we now have access to a much better solution – Cascading Style Sheets, or CSS.
Jun
28
Some Help with Webdesign and Colours
Filed Under Software Development, Computers & Tech on June 28, 2006 | Leave a Comment
Something I’ve always had a lot of trouble with is developing good colour schemes for web pages. (The fact that I’m rather colour blind does not help matters!) I generally end up falling back to a mono-chrome scheme where the site just uses many different shades of the same single colour. This works but often leads to sites that look a little boring. I need to skin a new web portal at work that I want to make look good and professional to speed up it’s adoption so I decided I just had to get to grips with this colour thing. There is no magic quick fix but here are two links I found in-valuable and that I’m sure will also be a great help for others trying to get to grips with this:
- A page explaining the theory
- A nice interactive web-based colour wheel to help you put it into practice
May
3
Dashboard Widgets for Web Monkeys
Filed Under Computers & Tech, Software Development on May 3, 2006 | Leave a Comment
Following on from my recent post on Dashboard Widgets for Techies, this post previews some nice dashboard widgets for Web Developers.
Regular Expressions
We’ll start with what I consider to be the most powerful widget, the regular expression widget. Regardless of what web language you end up using and what you are doing the chances are that you will need to validate user-input and that you will need to use regular expressions to do it. There are a number of Widgets for testing regular expressions out there but of all the ones I’ve tried the RegexToolbox was by far the best. It allows you to set up a list of test cases and then match an RE off them and it tells you what it matches as well as all the matches within bracketed groups. It also allows you to test substitutions.
Technical References
It’s often handy to have the full spec for things at your fingertips and the Dashboard is about as ‘at your fingertips’ as things get so it makes sense to have some API specs in Widget form.
I know I hate PHP but I still have to use it quite a bit and I know a lot of other people do too so a PHP reference widget is still very useful. There are quite a few different ones but the one I found to be the best is this one: www.apple.com/downloads/dashboard/developer/phpfunctionreference.html.
Another somewhat useful widget is the Tags – CSS widget. It sounds great and gives you a nice interface for searching for what CSS attributes there are but sadly if doesn’t give you the possible values for those attributes which is very annoying. A similarly disappointing widget is Tags – HTML.
Colour Tools
Easy access to the web-safe colour pallet is something that sounds very useful and hence you’d think there would be a very good widget for it but you’d be wrong. There are indeed many colour widgets but no very good ones. Color Safe is the best of a bad lot but it’s not perfect. I’m quite tempted to write my own Widget for this though.
Apr
22
Developing My First Dashboard Widget – Unix Time Stamp Converter
Filed Under Computers & Tech, Software Development, My Projects on April 22, 2006 | 3 Comments
I recently did a post on Dashboard Widgets for techies and am working on another about Dashboard Widgets for developers. There was one important widget missing from my list of widgets for techies, one for converting Unix Time Stamps to human readable dates and vica-versa. The reason it was missing was because I couldn’t find one anywhere on the Apple site! I find this strange because I regularly need to deal with Unix Time Stamps in things like logfiles and raw data in Databases, hence I’d have expected others to need this too and hence for there to be a widget for it. Well, I decided to remedy this omission by writing my own Widget which I’ve now submitted to Apple for addition to their Widget Downloads Page. I’ve decided to release it as GPL so you can get it on the downloads page of my home page.
So, how easy was it to develop my first widget? Trivial! I went from deciding to write the widget to a fully working first implementation in about 2 hours including all reading and experimenting that I had to do to get started. IMO that’s not bad at all, in fact I can’t think of any other platform I’ve ever used where I was able to do something useful as quickly.
So, what’s involved in writing a Dashbaord Widget? TBH very little. If you are up to speed with client-side web technologies then you’ve pretty much got everything you need. Yes, there are some extensions to these technologies involved to allow you to interact with the OS and the command-line and also for 2D graphics with Quartz if you want to get fancy but they are very easy to get to grips with and there are some excellent guides on Apple’s Developer Site.
A Dashbaord Widget is basically a web page written in XHTML that is skinned with CSS and made interactive with JavaScript. There really is nothing more to it than that. If you want to give this a go yourself the links below are all you’ll need.
- Apple’s Dashboard Developers Page
- Apple’s Dashboard Programming Guide
- Apple’s help topic on getting your Widget to flip
As I said I had a fully functional Widget in two hours, took me a little longer to get it to do cool stuff like flipping round to show the credits on the reverse side and getting it skinned in a way I was happy with but all in all that Widget was no more than 5 hours work including all the fiddly graphics and layout stuff. A screenshot of the finished product can be seen below.
Oct
27
Nice web forms and not a table in sight!
Filed Under Software Development, Computers & Tech on October 27, 2005 | Leave a Comment
I am well aware that tables for layout are a BAD BAD idea and have stopped using them for such perverted things years ago with just one exception, forms. I started doing my forms in lists because IMO that makes sense but clients were always grumpy when web forms weren’t layed out in the traditional two column way and short of creating a mess of Divs I always ended up falling back to tables for forms. Not anymore! I’ve FINALLY found a nice way of doing forms so that the XHTML is simple, elegant and more importantly, semantically correct while still keeping to a nice two column layout.