Web development [52 post(s)]

19 January 2011 - 06:04
31 August 2010 - 07:34

Flash and IE … grrrr !

I was struggling lately with some Flash which I couldn't get to work on IE, no matter which version.
It finally turned out to be linked to a wrong clsid attribute value in the object tag.

This worked for me:

< object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://www.adobe.com/shockwave/download/"
width="640" height="480" title="Program" id="progamID" >

This did not work:

classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"

Now these class attributes were generated by Dreamweaver and I don't really have good understanding what they stand for; but the puzzling thing was that this attribute apparently affects browsers differently.

On the way to this solution I passed to several sites on the matter of using Flash on websites:

On publishing Flash with the help of Javascript:

(0) Comments ·
17 July 2010 - 10:44
20 March 2010 - 13:14

How to download flash from a web site

You can download flash videos from a website either with dedicated tools for that purpose or by going into the source code and tracking the path allowing you to then manually download the flash file e.g.
Obviously the latter requires a bit more technical experience. And even if you have that, it can still be a time consuming job, as many flash files are often encapsulated in all kind of codings.

A good place to start probably is wikiHow: http://www.wikihow.com/Save-Flash-Animation-from-Website .
In terms of the dedicated tools I've personally good experiences with Replay Media Catcher - amongst others I've tried are Fast Video Download, a Firefox plugin and Flash Saver (http://www.flash-screen.com/flashsaver/).

On the coding side: you'll find a very good description and approach with Firefox, free but a bit more technical, on following website: http://geeklad.com/download-flash-video-from-any-website

ps: Regarding Fast Video Download: although it's a great tool, you might run into the problem of dialog boxes starting to open extremely slow: http://support.mozilla.com/nl/forum/1/623540

(0) Comments ·
26 February 2010 - 13:41

Video editing

I had to go into the topic of video editing recently and come across this nice overview of tools for the matter: http://www.convertdirect.com/top_10_flv_converters.html

I got the best results with AVS Video Converter in terms of reframing, cutting and merging parts of video materials. But I really liked the user interface and the friedliness of a tool not listed in this article: FLV Editor Pro - I only had problems in properly merging the pieces as this didn't happened precisely enough for what I needed... in my experience and with my limited skills in this area, that is :-)

Two other tools which I've used and tried out are Replay Converter, the best tool in my experience in terms of allowing recording from web pages - this tool really allowed recording flash from some sites where all other tools failed.
And also Super, which I've found the best tool for converting purposes; not the most user friendly, but a really Super one !

(0) Comments ·
24 February 2010 - 07:28

Transparency on iframes in IE7

If you work with iframes, you might have realised already there's an issue with the transparency settings.

Especially in the IE browsers even if you give specific CSS instructions to have the body background colour rendered transparent, you won't get what you're after - the background is still going to remain opaque.
Following article describes the issue and solution nicely : http://www.tech-recipes.com/rx/1253/htmlcss-transparent-iframes-in-all-browsers/ - in essence: you need to add allowtransparency="true" to the iframe HTML ; and of course also set the background transparency to the body CSS tagselector :-)

(0) Comments ·
05 December 2009 - 03:45

What is a browser?

I've always considered asking questions as a fundamental key in any teaching work.
Good questions have tremendous potential in induce insight.

And the most basic questions may sometimes be very well the most powerful triggers to insight.
That's what some people from Google have proven by going out and asking this very simple question to the general public on the street :

what is a browser?

The experiment was done in New York, but taken over in some other cities. They all proved to be very enlightening as to how few people really can answer this question properly.
An a eye-opener for the webdeveloper indeed, as in the light of this experiment, the daily concerns of browser compatibility, the decision making process towards CSS, the strive for webstandards, and so on seem suddenly to become so ... well 'futile'...
And even if all those of us, in our efforts to take our work to high standards, know these issues aren't futile at all, it's always good to practice empathy and stay in tune with the 'end user' - isn't ? :-)

browsers anno 2009

But see for yourself if you haven't done so:

Sitepoint elaborates on this experiment through one of it's Ezines.
Google itself was so struck by the results that it decided to launch a website explaining the answer and especially what's the difference between a browser and a search engine. The site has some interesting links to a browser historical line and other browser stuff.

(0) Comments ·
01 August 2009 - 06:00

Dynamically sorting and filtering html tabular data on the client side

Now that javascript has re-incarnated into all kind of libraries and frameworks like Ajax and JQuery, It's amazing what can be done today on the client (browser) side when it comes to dynamic web pages.

I've been looking into a couple of solutions for a client who needs to provide web pages with sorting and filtering possibilities for html tables basically, but all triggered from the client's browser. In case you want to experiment too, have a look a the following.

sample of dynamic data filtering from client side
  • Firstly there's the use of the Spry, Adobe's open source javascript framework. Nicely embedded into Dreamweaver now (since CS3), it allows you to nicely access structured data, be it e.g. xml but also html tables !
    There's a whole bunch of possibilities and samples demonstrated on this page: http://labs.adobe.com/technologies/spry/samples/
  • Then there are all these wonderful programmers and developers making all kind of solutions available. Matt Kruse proposes his Javascript Toolbox with all kind of libraries and the one to sort and filter tabular data is really very nice: http://www.javascripttoolbox.com/lib/table/
  • Toby Von Loesch is another one. He developed a very simple but powerful Javascript to filter a standard html table: http://www.vonloesch.de/node/23

Amazing evolutions indeed ! And although limited (JavaScript, no database, functionalities etc.) really worth looking into as they bring speed and versatility to the client side of the application.

(1) Comments ·
28 July 2009 - 15:32

HTML 5

There has been a lot of discussion lately on the net regarding the topic of HTML 5 -
As an illustration this post on Jeffrey Zeldman's blog can count: http://www.zeldman.com/2009/07/02/xhtml-wtf/ (see the comments too).

Just two blog links here which made a lot of sense to me and clarified the issue:

(0) Comments ·
23 July 2009 - 14:28

Mind Map on web development

I've been working lately on a first version of a mind map on web development.
A kind of a blueprint really for some of my courses, based on my experiences, on what I've been reading and studying myself, on all kind of resources and what I happen to process as 'highlights'.
And of course all excuses making me go through the tons of materials spread all over my office are good indeed - so I'm happy too having allocated some time to this as well :-)

The map covers a whole range of fields or themes linked to web development and web design, with all kind of resources - I intend to develop it further when doing my courses, with time, but as I know some people have requested for a download already...here is version 1... as it says a very first version :-)

mind map on web development

Downloads

All feedback, suggestions and input of course more than welcome !

20 July 2009 - 07:11

php in Expression Engine’s Entries

If ever you're an Expression Engine user (great ! me too :-) ) and if ever you wandered if you can actually use php within the blog entries you post, the answer is yes. And yes there are some security issues to consider.

Here is where I found the how: http://expressionengine.com/wiki/PHP_In_Entries/

(0) Comments ·
18 July 2009 - 05:48

Quality resources for web development and web design

During the last past months, my dear web developer friend Jaydev - currently much into the topic of usability - has kept on forwarding me so many links on the topic of web development and web design, that I felt I had to do something with it. Actually I was wondering even at the first place where he keeps on finding the time to go through all these resources !

So as I'm into the preparation of some web development courses, I grabbed the occasion and went through them once again, categorized them a bit and so for whoever may take benefit from or find them useful too: a nice collection of quality resources to improve the quality of your web development and web design works...

ps now who knows when I'll take or find the time to add all those nice ones hidden in my own bookmarks... but then also : who would have the time and the need to go through them anyway :-)

ps2 Well i've started adding some of my own resources too I noticed... :-)

[Read more on Quality resources for web development and web design...]
(0) Comments ·
03 July 2009 - 16:53

Should I or should I not …. install IE8 of course !

The beginning of July brought an interesting choice when logging on to my PC: windows update apparently wanted to install Internet Explorer 8 (IE8) !

IE8 logo

Ha ! There it was - as of course I had been following the topic since a couple of months and witnessed the problems with the upgrades to IE8 - and, of course, I didn't allow automatic installation. Luckily we're still offered the choice - after all :-)

Now I must say immediately I can only be in favor of IE8, as in terms of CSS, it's definitely adhering standards better than all the earlier versions all together. So I can only be happy with its venue.
Nevertheless some care is definitely on its place here, as there seem to be all kind of possible pitfalls during the installation process, there are performance issues to consider too, but most importantly I have to consider testing, as I basically use IE for testing only - and yes indeed: we now have this wonderful transition period of IE6, IE7 and IE8.

So this is what I've decided to do: nothing basically, that is on my main PC with Windows XP - I'll give IE8 a tryout a bit later this summer on my Vista driven portable.
And I'll use IE Tester for my (CSS) development, along with Multiple IE.

If ever you're after some materials to make up your strategy:

Some experiences and/or tips

Tools

(0) Comments ·
17 June 2009 - 11:56

New webfonts on the firmament?

If you're in for some experimenting with web fonts and/or you want a change from the sIFR approach, then you could consider using the Typekit service.

Kevin Yank from Sitepoint recently addressed an article on this topic under the title: Get Real with Typekit.

Typekit introduced Typekit recently and that immediately triggered of an ocean of comments.
So that might be an inspiration.
If you prefer to evaluate a practical implementation: nicewebtype.com is your place to be.

(0) Comments ·
16 June 2009 - 16:11

To CSS or not to CSS: Object Oriented CSS

I knew it, but couldn't really put the exact wordings on it.
There must be another way to CSS.

Because looking at the talk Nicole Sullivan did for the Yahoo Developer Network Theatre, I have to admit : I did it too - I am co-responsible too in having contributed to following observations regarding CSS:

  • CSS requires quite a bit of expertise : yes I've been writing good semantic stuff, but web developers over there had hard time to understand with basic CSS knowledge...
  • File size just keeps getting bigger: yes to solve issues, match design requirement and so on, I've seen the sizes of my CSS files growing...
  • Code reuse is just not happening: yes it's true, I haven't made that extra effort to ensure that code for returning parts would be completely and easily reusable...
  • Code is too fragile : well indeed I was already happy if I could get it all together in a semantic way for all browsers...

And some other good practices

So her talk was on 'Object Oriented CSS' for high performance web applications and site and summarizes 2 of the main proposed principles nicely as follows -:

  1. Separate structure from skin - separate the CSS to layout, position, structure including browser compatibilities etc. from how it should look like
  2. Separate container and content - separate the CSS for the object, the placeholder, the container from what should go in, so that anything can go in
Teaching Object Oriented CSS [Read more on To CSS or not to CSS: Object Oriented CSS...]
(0) Comments ·
20 April 2009 - 07:41

Cufón

cufon sample

I haven't tried it yet, but this font face replacement technique discussed in Sitepoint Design View #58 and proposed by Cufón immediately grabbed my attention.
I've been using the sIFR (or Scalable Inman Flash Replacement) but this really seems to open some new perspectives as no Flash is needed and some issues with sIFR are being surmounted by Cufón. ...

(0) Comments ·
17 March 2009 - 13:40

Definition lists to style a multimedia listing of flash videos

I did ponder about using a definition list to provide some good x-html for a multimedia project, it, but finally gave it a go.
I came up with something which worked great in all browsers, including IE6 (yes still considering it a couple of months for now :-) )

And although I couldn't stop myself of not considering it a fully appropriated use of semantic html, I still found it very useful to consider definition lists to style this multimedia listing of flash video items.

Code

<dl class="mmItem">
     <dt><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. </a></dt>
     <dd>
           <object data="http://www.youtube.com/v/Iu68UXU7UUs&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" width="150" height="125">
           <param name="movie" value = "http://www.youtube.com/v/Iu68UXU7UUs&amp;hl=en&amp;fs=1" />
           </object>
          <span class="mmRating"><img src="images/stars_5.gif" width="75" height="14" alt="Rating" /></span><span class="videoItem">&nbsp;</span>
    </dd>
</dl>

CSS

#mmItems { float:left; margin: 0; padding: 0; clear: both; width:100%; overflow:hidden; } /*IE7 */
.mmItem { float:left; position: relative; margin:0 6px 15px 6px; top: 5px; width: 325px; left: 6px; min-height: 125px; }
.mmItem object{position:absolute; left:0; top:0}
.mmItem dt, .mmItem dd { padding:0 10px 5px 160px; margin:0; }
.mmItem dd {}
.mmRating { float: left; display:block; line-height:25px; padding: 2px 0 0 0; }
.videoItem { background:url(images/videoItem.gif) no-repeat center center; width:30px; height:20px; display: block; float: right; line-height: 25px;}
.audioItem {}

Afterstudy

Afterwards I did some research on using definition lists in such situations. Which reassured me actually, as these (older) samples confirm the use of multiple dl-elements.

(0) Comments ·
26 February 2009 - 15:56

CSS Grid Systems

Through an article in Sitepoint recently, I got into exploring some 'grid systems', which can come in handy when doing some new site layouts:

Some in and outs of these systems, so advantages and disadvantages are discussed in the annexing blog postings.

I've added these also to my overall CSS links page, which btw is regularly updated.

(0) Comments ·
07 February 2009 - 03:49

direction:rtl breaks CSS layouts in IE

Gosh, having to do a some Hebrew web sites, I was quite happy to find out that working with the {direction:rtl} actually works quite nicely. Even IE seemed to behave rather well, till of course I had to tackle some more complicated design with floats - there IE6 broke the whole design. I used every possible tool to hack IE6 I know about - there's a whole list by now - but nothing seemed to work.... Despair !! :-)

Luckily enough there's some wonderful developers out there, publishing wonderful articles and even though this one is years old, it did provide the solution: the workaround is to override direction for floats and re-apply it to elements that contain actual text. Go to Aleksandar Vacić 's article for a full explanation.

(0) Comments ·
04 February 2009 - 14:49

Align numbers in tables with CSS

How to align numbers in tables with CSS, without having to apply a class selector on each and every td-cell?

Well luckily enough HTML provides the col- and colgroup-elements which can be used to address tables.
Suppose you have a table with 4 columns and you'd like to align the three last columns with figures to the right (leaving decimal aligning aside here as this is not really possible yet with CSS)...
You could start with following HTML coding.

<table width="90%" border="0" cellpadding="0" cellspacing="0">
<colgroup>
<col>
<col class="tableFigures">
<col class="tableFigures">
<col class="tableFigures">
</colgroup>
<tr>
<td colspan="4" class="tableTitle"><h3>Population en Europe</h3></td>
</tr>
<tr>
<td>Albanie</td>
<td>3422</td>
<td>119</td>
<td>0,6</td>
</tr> .../...
[Read more on Align numbers in tables with CSS...]
(0) Comments ·
28 January 2009 - 15:51

ARTE tv

If you speak french or german and live in West-Europe, the chance is real you know about the French-German cultural TV chain Arte. Not only Arte has high standards in terms of programs they diffuse, they manage to combine vision and quality.

They also set standards in terms of internet though.

Arte TV 7+

Actually I don't have TV cable, so I'm not really able to watch ARTE nor any other TV chain at all.
Well... "was" in case of Arte.

Because of course they have a site - and moreover: they provide online TV for 7 days after emissions. This approach of re-diffusion of a whole series of qualitative programmes for one week is actually outstanding. Not only the user interface of Arte+7 is very well conceived, it's definitely also a good, if not an exceptional, example of how flash technology can enhance user interaction.
Initially looking at their programs was reserved for inhabitants of France and Germany only, but since shortly they've managed to open the frontiers totally.

Do visit their subsite Arte+7 - I'm sure you'll find it a worthwhile passage and you'll be able to grab away some interesting documentary or two.

(0) Comments ·
19 January 2009 - 16:46

Strict Doctypes, deprecated elements and XHTML soup

Once you're on the path of wanting to write compliant code, the switch to choosing strict doctypes is a logical consequence.

In case you ever wondered where to find the so-called deprecated elements and attributes, which you can't use anymore if you choose a strict DTD for doing your webpages...
well I suppose a good place to start would be the web consortium itself. They have some published some interesting lists with all kind of additional information on the html elements and attributes as well.

Now you can still go for HTML or XHTML strict, and although I'd find being dogmatic on these topics isn't really an option for me - I tend to adapt to the situations and clients - I did enjoy reading following article on the Mozilla Developer Center recently: Making your page using web standards - how to
It's not only an article on good practices but also a vivid call for HTML strict and not XHTML - there's a couple of extra links on that page contributing to that call and really worth reading too.

And some more links on the topic:

(0) Comments ·
14 January 2009 - 16:50

What to do with IE6 in 2009?

Well yes with IE8 coming up, you might wonder what to do with IE6 ; not always easy to answer as long as some major businesses or organizations still use this browser.
So a podcast and some links may be of inspiration:

(1) Comments ·
20 October 2008 - 06:46

E-mail Obfuscators

Ever wanted to 'obfuscate' your email addresses? Ever heard of the term 'obfuscation'?

To start with the latter, Wiki says:

Obfuscation is the concealment of meaning in communication, making it confusing and harder to interpret.

In IT terms, obfuscation got a wider practice with the upcoming need to hide email addresses from search robots, email harvesters etc. It there refers to making the code obsolete or un-readable for robots or programs other than those the code is destinated for.

If you're still into search for some good tools here's just a grip out of the tools available on the net:

After obfuscation your code typically looks like this:

<a href="javascript:location='mailto:\u0069\u006e\u0066\u006f\u0040\u0065\u006d\u0061\u0069\u006c\u002e\u0063\u006f\u006d';void 0">Danny</a>

or

<a href="&#109;&#97;&#105;&#x6c;&#116;&#111;&#x3a;&#105;&#110; &#102;&#x6f;&#64;&#x65;&#x6d;&#97; &#105;&#x6c;&#46;&#x63;&#111;&#x6d;">Danny</a>

You can of course also use an image or a simple descriptive : danny'at'email.com :-)

 

(0) Comments ·
10 September 2008 - 14:26

Firefox Myths in the light of Chrome and IE8: Opera?

The least one can say is that it's a 'moving time' in browser world.

Firefox Myths

At a moment where Google fired off the new Chrome browser project (have you seen the Google Chrome cartoon?), where the internaut can bump on websites pointing out several Firefox Myths, and Internet Explorer 8 lurks on the horizon, it's perhaps good to honour Opera once again for its trendsetting work.

Indeed, although of minor significance in terms of numbers - just as Safari - hasn't this European browser project been doing inspiring pioneering work for over over 10 years now?
'Lightweightedness', fast surfing, tabbed browsing, zooming, accessibility, security mindedness, multi-platform, web standards compliance, multiple device orientation... As far as I can remember, I've been introduced to all these concepts by the Opera community... So if they and other browser manufacturers achieve in those aims and make those concepts a reality, Opera's vision will definitely have had a significant contribution in it.
. Gracias !

You might consider visiting the newly launched Opera Web Standards Curriculum, released in association with the Yahoo! Developer Network. It contains interesting resource materials to

(0) Comments ·
17 August 2008 - 08:34
10 August 2008 - 07:07

DNS change or how to chase your customer away

I've been migrating my professional domain zudan.eu lately to a different host - wanted to tryout the services of Hostgator.
So far so good.

So just had to switch DNS servers at my current (Belgian) DNS provider, Hostway. Piece of a cake you would think.
And indeed I found my domain manager interface, found the place where to change the DNS servers, and promptly did so...

[Read more on DNS change or how to chase your customer away...]
(1) Comments ·
07 August 2008 - 07:44

RSS feed validation

I've been testing Outlook 2007 lately, and more specifically today it's RSS feed capabilities... That's where to my astonishment I realised it choked on something... throwing an following error:

"Outlook cannot process the RSS content. The link may not point to a valid RSS source."

Gosh, with an atom script generated from within Expression Engine... where to start looking? Google of course, then up to the Expression Engine forums, where I found a link to a real gem: the Feedvalidator for Atom and RSS... and yes indeed after validating the page, I was reassured the Atom script validated BUT it also made me come across a variable in a link tag which had an error... once that corrected even Outlook 2007 now behaves well again.

Feed Validator

Great tool !

(0) Comments ·
06 August 2008 - 11:33

Setting up your local open source dynamic development environment

Setting up your local system for dynamic development with an open source environment was a challenging job initially. Those times have passed since quite a time by now.

Several years back I started using the self-installing package of EasyPhp. EasyPHP is a complete package allowing to use all the power and the flexibility that offers the dynamic language PHP and includes an Apache server, a MySQL database, PHPMyAdmin as well as some development tools for web sites and applications.

Another good Windows web development environment is WampServer, which equally offers Apache, PHP and the MySQL database, along with PHPMyAdmin and SQLiteManager to easily manage your databases.

(0) Comments ·
05 August 2008 - 03:59

Stupid User Syndrome

This rolled in my email box today ... and I actually read it ! :-)

Published by PeachPit, under the title "Stupid User Syndrome: Why We Become Idiots Online (And What Web Designers Can Do About It)"

It's good to meditate things a bit deeper from time to time, and sprinkle it with some psychology, to finally come to the conclusion that if you continue to do what you have always done, you'll end up getting what you've always got...

ps - if in a hurry mood, just read the last two sections or so ...

(0) Comments ·
03 August 2008 - 09:01
07 May 2008 - 16:17

A Guide to CSS Support in Email

Or how to survive Outlook 2007's rendering limitations?

Writing and developing html email hasn't become particularly easier over the years - on the contrary, the new version of Outlook, Outlook 2007, virtually forces the developer to go back to table based design or use design methods which had been abandoned already.

Whilst searching some information on which email programs still support background images, I bumped on this very comprehensive overview on this matter: A Guide to CSS Support in Email - Last years's version is here: A Guide to CSS Support in Email: 2007 Edition.
You'll find some links on which CSS selectors are not supported anymore in Outlook 2007, but especially also an overview of which properties are supported by which email client - great information !

Equally great is Campaign Monitor's Guide for the Web Designers wanting to survive the html email saga, full of interesting resources really.
If you're after a comprehensive list of what Outlook does render (or read Word 2007's rendering engine), try this overview at MSN.
Yet another ‘enlightening’ & interesting must read article on the use of html email: based on Sitepoints' experience when revamping their email newsletters...

Update

There's a commercial preview tool now available: http://litmus.com/

(1) Comments ·
30 April 2008 - 14:15

The CSS italics bug in IE6

This one kept bugging me for quite a while. Working on a project with multiple pages with quotes in italics we bumped on several pages breaking the layout - of course in Internet Explorer 6 only, that was.
The issue occurred in a floated container when using italic text, typically jumping below the other content leaving a big gap, as clearly something in IE6 decided the width of the container wasn't convenient anymore.

I remember having met this problem before and having it solved then by slightly reducing the width of the quoted paragraphs and/or reducing the spacing between the characters slightly.
But not this time - pages kept on breaking either in enlarged or reduced font sizes, moreover in a completely unpredictably way, as this applied to some page but not to others.

I found this link on the italic bug on Position Is Everything, explaining the issue and suggestion some solutions... it didn't seem to work at first trials. But then in combination with an article on an old CSS discussion list I could apply the break through method with success:

  • you have to tell IE6 explicitely what it's supposed to do anyway by default: showing the overflow - so add overflow: visible to the (innermost) block element containing the italic text (the element whose width is going to be wrong)
  • also make sure that this element has any assigned (not auto) dimension

So this is where the essence becomes real simple:

#content {height:600px; overflow:visible;}
(0) Comments ·
06 April 2008 - 13:32

More on displaying special characters in your blog, like Expression Engine specific code

I've been tackling this topic for Html already , but just taking it a step further: how to add dynamic code, code with curly brackets and the like to your blog, in casu here Expression Engine?

Basically there seem to be 3 options:

Ascii conversion
  1. You can 'encode' special characters like curly brackets, rectangular brackets etc. by referring to their decimal ASCII value - you do so by typing an ampersand, hash and a number, followed by a semicolon: eg '&#93;' stands for ]
  2. You can 'encode' special characters, curly brackets or code with 'character entities' - left curly bracket is '&lcub;' , right curly bracket is '&rcub;' - similar syntax as previous point
  3. In EE, you can wrap your code within the special code tag [code] your code [/code] - WITHOUT spaces - be very attentive not to use spaces within the rectangular brackets

You probably find this a useful 'ASCII Decimal Octal Hex Binary HTML Table' - more info on EE encoding at in this post. More ASCII tables on ascii-table.com, a great resource : they even have a 'conversion calculator"

And if you ever wondered about all the naming conventions for this ASCII characters: with joy a forward to the Pronunciation Guide, which solved a problem I had during courses for years how to address <> ? I asked more than one native English speaker, but I'm now happy to know it's called: Angel brackets

(0) Comments ·
05 April 2008 - 08:10

Expression Engine: counting items in categories without the query module php

If you want to count in Expression Engine - e.g. how many items you have in each categories - you're bound to use recordsets and probably need the Expression Engine's query module to help you generate the SQL and bridge the PHP .
This module is part of the paying version and actually enables easy generation of all kind of SQL queries, without you having to ponder about the integration with the PHP engine.

However: if you want to achieve things occasionally without using this module .... well the good news is you can: as I wanted to experiment to see what and what wasn't possible, I came to a solution which actually matches what I was after.

Count posts in EE

And that was something relatively simple actually: I just wanted to be able to show the number of posts in a categorie, when users click on one of the categories; and as I don't want the typically numbers of items after the categories (well not yet, I might change my mind - but it seems a bit pompuous at time :-) ) I decided to give this a go by writing the PHP myself.

[Read more on Expression Engine: counting items in categories without the query module php...]
(0) Comments ·
30 March 2008 - 15:04

Choosing the right colours

Tools I have been using or came across to come to terms with 'color' :

color scheme Firenze
(1) Comments ·
10 March 2008 - 07:51

Google - a leading web company?

Through its overall penetration and use as a search engine alone, you’d think Google would also be on the track and a good example of web coding…

But my astonishment accidently looking at the source code of the Google homepage today was ...well ... ‘overwhelming’ - I’m guessing here: Google must be wanting to give a course in “What are the top 10 guidelines to absolutely avoid in examplary web building"… by actually demonstrating it:

  • To not use a doctype declaration
  • Use deprecated tags, as <font>, <center>, <b>, ...
  • Use <u> tags, to simulate links
  • Only use embedded styles and/or perhaps also use an inline style when it’s not absolutely needed
  • Mix html attributes and styles to moreover, do the same thing
  • Use non-meaningful names for css selectors
  • Don’t use heading tags and/or think a bit more deeply on how to structure the (x)html
  • Don’t spend too much energy on accessibility, especially for forms
  • Use br and why not some tables to structure and layout - (well they forgot the use of nbsp probably)
  • Don’t bother about attributes for the scripting tags

Well and actually we could go on:

  • Don’t validate the page
  • Don’t bother about code formatting

And all that in less than half a page??? 
Wah ! I’m speechless here :-)

(0) Comments ·
05 March 2008 - 14:48

How to display HTML source code in your blog posts?

If you want to display HTML source code in your blog posts, you will have to ensure the html tags or ‘entities’ are being ‘encoded’.
Otherwise the code is just parsed by the browser. 
And depending on your blog system, you might also have to wrap the source code into <pre></pre> tags to avoid quotes being translated into curly quotes.

Practically this means that:

in stead of typing <pre></pre> in the line above -
i’d had to type &lt;pre&gt;&lt;/pre&gt;

That also means that to get the last line rendered properly I had to type in this in my blog post

&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;

[Read more on How to display HTML source code in your blog posts?...]
18 February 2008 - 06:33

HasLayout

Had to tackle a couple of weird issues related to the CSS coding for a design mockup I did recently.
It turned out to be a combination of a ‘Margin Collapsing’ issue with one of those famous hasLayout phenomenologies in IE.

So I bumped onto a nice explanation on this IE rendering logic, where I found something I’d never seen before: some small Javascript code with which to check whether your container is having layout or not. Quite useful indeed:

javascript:alert(id_of_element.currentStyle.hasLayout)

Some comments on the article are available here.

(0) Comments ·
07 February 2008 - 16:41

Safari for windows

I had been very pleased to grab a copy of the Safari beta version from the very moment it was launched…
Finally ! There was a possibility to enhance my CSS development and check my work on a Windows platform against the most famous browser on the Mac system.

But ... the very first beta versions were horrible and didn’t render the fonts properly.... Luckily enough that was solved soon ...
Till somewhere by the end of last year an update to the latest version broke the festive mood again.... I got a systematic crash when launching the program ever since.

I tried all kind of things, searched the net, but had to give it up - it doesn’t happen so much, but I really had to give in on this one.
Till today, where I found my solution on an Apple discussion forum, via the Apple Development server.
Finally !

So when you have this as an error/problem:

AppName: safari.exe AppVer: 3.523.12.9 ModName: webkit.dll
ModVer: 3.523.12.9 Offset: 0008a039

the solution for me was hidden in this friendly message from China:

Re: Safari crashes on opening - Safari for windows - Posted: Dec 18, 2007 5:58 PM in response to: TabbRock
Hi, everyone! Yesterday I tried to delete some fonts in my windows XP, and Safari worked again. I don’t know why, those fonts were all Latin fonts, not Chinese fonts.

I went through my fonts, knew I had been installing Helvetica fonts, and removed them temporarily - there was one indeed corrupt or so triggering the whole saga…

“Gosh ! Why does this need to be so complex all the time” is a phrase I hear myself often thinking - even here the king of the usability doesn’t go out free…
But then again : what a wonder the internet is, each and every day, again and again…
Blessings to China and to TabbRock !

PS : if you are on a non English version of Windows, this web post might save your day too…

04 February 2008 - 10:58

Modern Web Design with CSS

Little by little I’ve seen an increase here (that’s Belgium at the moment :-) ) in the awareness that CSS is really the way forward for modern web design / development.
However many companies & organisations haven’t come to the point yet to fully embrace the CSS road - yes it may be taken on board, e.g. as some ‘quick styling method’ or so, but there’s still a long way to go.

Training is interesting field which give you some indications; for many companies e.g. ‘Training’ is still a kind of necessary ‘cost’ ; it’s not really seen as a necessary ‘investment’ - like computers of furniture, to just mention anything.
Likewise, not so many companies and organisations have come to the point to realise CSS to what point CSS is a science and philosophy where Training is an essential step to take.

Also web developers who did take the road may have to confront following chart which I come across here and there; haven’t come to terms who or where it was originally published:
modern web design

A bit exaggerated perhaps, but isn’t it a sign of good health when one can have laugh with the ‘state of affairs’? It definitely helps in keeping up with the ‘right’ track !

(2) Comments ·
29 January 2008 - 12:55

Why bother about writing compliant code?

Of course I’m advocating it during my courses : writing good, validated, semantic, compliant code…
But why bother was a question I got this week ... because it doesn’t solve issues between browsers, it’s passing through main browsers anyway, and it’s taking up time ! And we’ve always done it like that and it worked fine ...

It seems a typical reaction here in Belgium in many companies and organisations - CSS has yet a long, long way to go, and definitely so the idea of writing validated, compliant code.
At many decision and hierarchical levels the idea that building a web page and web sites is just a question of some clicks and a bit of copy/pasting hasn’t taken place yet for a more profound debate and consideration.

In the mean time I’m posting this valuable contribution and resource page on the matter by Lorelle Van Fossen on her Wordpress blog.

(0) Comments ·
26 January 2008 - 15:52

The survival of the “Flashiest”

Well I don’t want to go into the debate as to well or not use Flash ...
I’m going to admit immediately that I’m probably a rather old fashioned web developer stamped by the beginning times of the internet with its bliss created by the ability of being able to share static content worldwide.
I mean this was just great ! As great as throwing Tipex out of the window a decade earlier, when memory driven machines started making life easier. 
And I must say that I’ve also rather quickly embraced the idea and always growing possibilities of managing and publishing content ‘dynamically’.
I love it !  Although I never got any technical training, I even got this wonderful occasion of exchanging the magic of sprinkling some CSS on PHP driven Includes forming the building blocks of MySql driven text blocks....

However there’s something about this call for Flash which I’m not getting. OK I admit I’ve never been attracted to it, although I do see and acknowledge the greatness of it in publishing low-weight video driven content. 
But why is it and what is it that drives people sometimes… well ‘Flashy’ in wanting it cost what cost for their website and their online presence?

Two cases taken out of real life situations this month which seem to “subscribe”, if not fully then surely partially, to the definition of ‘Flashy’ as given by The Free Dictionary:

  1. Cheap and showy
  2. Giving a momentary or superficial impression of brilliance

[Read more on The survival of the “Flashiest”...]
(0) Comments ·
07 January 2008 - 10:11

The validation attitude

Just as with pondering about semantic code has its benefits, the habit, or should I say -attitude- of validation is one with many benefits.
Well attitude is actually more referring to a personality trait - like it’s generally considered wise and respectful to check or even double check e.g. whether you properly understood what someone was trying to say during a meeting, before reacting.  And isn’t it a real sign of strength to have the humility to ask for a second opinion as you can ‘always learn’ or to include someone in your ‘gaining of success’ and enjoying success together always tastes much sweeter than just on your own?
You probably wondering whether I don’t get side tracked - I probably do - but isn’t taking that little extra step and effort to check the code you produces against web standards an act of ‘including’, of saying that you’re not doing it all on ‘your own’, that you can always ‘learn’, that you are ‘open’ and ‘willing’ to go deeper?

Anyhow, besides all kind of other benefits, I just wanted to highlight that indeed you just learn so much by just ... validation your code.  I generally do that by HTML Tidy - a firefox plugin or Total Validator, but you might also want to link up to the W3C validation page straight away.
Actually using different tools will already teach something about the differences there are in the validation process as such - but I’ll leave that for now.

[Read more on The validation attitude...]
(0) Comments ·
05 January 2008 - 06:46

<sup> element distorting line-height

Ever had to confront a <sup> element, when using footnotes e.g., that insisted in distorting the line-height?
I didn’t actually concentrated on the matter, but as it was coming up again during a course this week, I didn’t had to dig deep to find something useful. There are a couple of approaches, but using the ‘vertical-align:top’ seems to solves this beautifully :

.sup {font-size: 0.9em; font-style: bold; vertical-align:top;}

(0) Comments ·
04 January 2008 - 16:48

HTML Phrase Elements

If you’ve realised coding ‘semantically’, you’ve probably taken it onboard of your day to day code practices. Thinking about meaning anyway is to be considered as a good habit.
But sometimes you may just as I do, wonder whether ‘there wouldn’t be a better (x)html container to anchor your CSS...?

Well there might be - just grab a html reference and check whether there’s no incognito tag to do the job, sparing you another <div> or <span>.
Like the <cite > or <samp>, two of a series of so-called html phrase elements - ever used <var> to just mention another one?  I haven’t used this one… actually just discovered it by pondering about the matter, so I’ll definitely will in due time ! 
Actually ... I just did - in real time :-)

(0) Comments ·
30 December 2007 - 15:06

CSS and web browser support

As web developer one of the main concerns you have of course is how different browsers are going to render you code - especially in regard to CSS.
I stumbled across the work of this young man with the name David Hammond, who truly did a beautiful job and made one of the best and most complete overviews of ’Web Browser CSS Support‘ I’ve ever seen.  You can even choose the browser against which you want the checking to happen.

As a bonus he also published a page with a handy overview of the rates in which the main browsers support web standards for HTML, CSS and even the DOM model as such.

Nothing to add ! Just thanks for making this available !

(0) Comments ·
27 December 2007 - 16:10

Expression Engine and Veerle’s blog

I’ve been going into more depths regarding the use of Expression Engine -
It hadn’t taken me lots of moments to appreciate the code it renders, especially in terms of xhtml and CSS - and I could immediately see the power of its template system, as well as it robust nature.  It took me a while dough to really get to the point of certain aspects like the URL building, where the public member template is (still haven’t found it, but I suppose it’s in the licenced version only; also the documentation is not always helpful), or how to build conditional references to categories - and why certain code in my php includes wouldn’t render properly. 
It’s really things like this last topic which impressed me most - this is the first tool e.g. I discover where you can decide if php will be taken into account or not on a template page and moreover if the php code needs to parsed ‘before’ or ‘after’.  And so many more luxury throughout the control panel.  I had made up my mind already to take the EE direction from 2008 onwards - looking forward to discover its further potential.

Speaking about Categories and EE: this brings me to this useful resource I went through today, about Categories and paths in EE. Many other interesting resources on this beautifully designed and world famous web-blog of this Belgian designer and developer Veerle Duoh - a fellow country woman indeed !

Which closes the circle beautifully as it was this very blog actually which brought me on the track of EE, so - even if she might never read this and gets about two dozains blessings for her work from all over the world every day anyway - a sincere thanks Veerle. 
As thoughts anyway reach their destination at the very moment you think them :-)

(0) Comments ·
Page 1 of 1 pages