Posts filed under 'Web Design & Scripting'
This evening, I finished the rough draft of the new Design Delineations Web site (http://designdelineations.com) and integrated the template into the existing pages. The new Web site uses the latest CSS techniques and unobtrusive Javascript for tabbed navigation with submenus and sports a completely new look and feel.
Over the next few weeks, I will continue to rework the content on the site by creating new copy for most pages and adding graphic elements where needed. As time allows, the blix theme being used by this blog will also give way to the look and feel of the main site.
July 21st, 2006
Today I took my first steps towards using application development frameworks professionally. I needed to develop a database application to track client information and since I have read about a number of application frameworks in PHP that simulate the behavior of Ruby on Rails, I installed one and gave it a test run.
My first attempt at installing a framework (which shall remain nameless) was not entirely successful due to limited documentation and the fact that I’m more of a scripter than a hardcore PHP programmer. On my second attempt, I stumbled across Code Igniter, an application development framework built on the Model-View-Controller pattern. One of many such frameworks, Code Igniter enforces, or at least encourages, the separation of content and application data and when used wisely, can result in cleaner code and more rapid development of PHP applications.
I’m pleased with Code Igniter after the first day of use mostly because of its two introductory video tutorials and because of the extensive and clear documentation. All of this coupled with a very active forum with qualified programmers actively solving problems results in an attractive development platform for us PHP programmers who don’t want to, or can’t switch to Ruby on Rails due to platform restrictions.
If you are an intermediate level PHP programmer looking for a way to automate repetitive programming tasks and move into object oriented programming, Code Igniter is very likely to meet your needs. With a little work, you’ll move to the next level in PHP Web development.
June 19th, 2006
Joseph W. Lowery’s book, CSS Hacks & Filters, makes a great effort towards amassing all the current CSS Hacks available on-line and explaining their appropriate usage. To a great extent this volume succeeds in making order out of chaos and I heartily recommend its use as a supplemental resource for anyone who does not want to bookmark every CSS Hack Web page they might find useful.
While Lowery’s clear explanations of the rationale and appropriate application of each hack adds significant worth to this book, the real distinction between CSS Hacks & Filters and other CSS volumes I own is its focus on implementing CSS design with Dreamweaver’s internal template engine. This can be a real time saver for those new to Dreamweaver’s template engine and/or CSS.
CSS Hacks covers tasks like using Javascript/DOM to serve appropriate style sheets to various browsers, server side solutions for CSS, CSS based navigation systems, and image scaling with CSS. In addition, it includes several example templates that have been broadly tested on current browsers and that can provide a more secure foundation for your cross-browser design project than your own untested layout. Lowery also includes a detailed appendix that lists the various CSS Hacks/Filters and their applications.
This book is an excellent resource for those beginning CSS, especially if they are interested in Dreamweaver and Web development or scripting languages like Javascript, PHP, or ColdFusion.
You can find a bit more information about the author at his Flashbang! Web site.
- Author: Joseph W. Lowery
- Paperback: 266 pages
- Publisher: Wiley (June 2005)
- Language: English
- ISBN: 0764579851
- List Price: $29.99
Wiley books are available at your local bookstore or by calling 1-800-225-5945. In Canada, call 1-800-567-4797.
April 24th, 2006
Over the last couple of days, I spent hours trying to use DOM techniques to change captions for a Javascript slide-show in a way that respected HTML tags embedded in the text.
Using the DOM to keep the code clean was easy. But it wasn’t easy to find a way that allowed users to include HTML tags in the captions. Javascript DOM nodeValue simply changed everything into HTML entities and the tags displayed uselessly as HTML text. Nothing I did worked.
Finally, I emailed a friend who agreed to tackle the problem. 10 minutes later the solution was in place. What was the solution? innerHTML.
This method is not technically standards compliant, but has huge cross-browser support and was by far the best solution for this problem. Go figure. Playing it safe and using standards compliant techniques isn’t always the best way to approach programming and design, even if it usually is!
Some great discussion has already taken place on this topic at Quirksmode and DomScripting.
Thanks Ryan!
March 2nd, 2006
I learned CSS initially because I was frustrated by the repetitive tasks that the old Web design techniques imposed on me. Removing and changing font tags was not a favorite passtime. As CSS evolved and my ability as a designer improved, I saw other benefits of CSS design. These included simpler code, increased search engine visibility, faster page loads, and even greater accessibility.
Of course, my first attempts at CSS design weren’t always coded with simplicity. I added tags where some simple CSS code would have sufficed. I credit some examples of low clutter templates for WordPress with teaching me excellent semantic coding in XHTML. Though the templates weren’t eye candy, they did get the job done with a minimum of clutter.
My devotion to CSS increased when learned that uncluttered code increased search engine results, provided the content that is on those cruft free pages is actually relevant to people browsing the Web.
Since speed is so important to many people who browse the Web on their dial-up connections, I saw the bandwidth savings of external linked CSS as a great asset. Of course, there is a bit of a frontloading effect. Let me explain. Though CSS in external files is cached in the browser’s memory from page to page, it must be loaded completely on the first page view. Since CSS files do not have to be large to be effective, this is usually not much of a drawback.
Though I do not claim to be a Web accessibility guru, I do see significant advantages to uncluttered HTML code for those on assistive devices such as screen readers. Even for those on small screens, clean code can make a standard page render more usefully.
January 18th, 2006
I have been puzzled by the way IE displays list bullets beside left floated images for some time. Actually, doesn’t display list list bullets, is more accurately put. The list bullets on unordered lists (UL) and numbers on ordered lists (OL) are hidded behind the floated image. My usual response has been to add a massive amount of margin or padding to the floated image, but this is unsightly. Today, I devised a workaround that has its weaknesses, but at least seems to render consistently across browsers.
I begin by setting margin and padding to zero on the lists (UL and OL) to help things render equitably across browsers. Then I declare all margins on the list items (LI). This should even out cross-browser problems. The final rule is a class that can be applied to the list (UL or OL) and the resulting float causes everything to render beautifully in IE. Though the float causes real display problems in other browsers, the IE Only Hack hides it effectively.
ul, ol {margin:0;padding:0;}
ul li, ol li {margin:0 2em 0 2.25em;padding:0;}
* html .byfloatedimage{float: left;} /* IE Only Hack */
If you have any improvements on this method, or one that works more elegantly, please post it below!
June 17th, 2005
Next Posts
