Tag: HTML

Skicka formulär med “enter”

Jag stötte på ett lite udda problem idag. Ett formulär som tidigare haft en egen submit-knapp skickades nu istället med hjälp av ett javascript. Detta gjorde att möjligheten att skicka formuläret genom att trycka enter på en rad slutade fungera.

Tyvärr ville jag inte ha en submit-knapp längre utan ville fortfarande använda javascriptet för att skicka formuläret. Tyvärr var webbläsaren för smart för att luras av en dold-submitknapp. Jag ville inte heller ha en trigger på varenda fält i formuläret. Lösningen blev istället följande kodrader:

<form ... onsubmit="sendForm();">
...
<input type="submit" value="sök"
  style="background:white;color:white;border:none;">
</form>

Denna kod fungerar perfekt! Knappen syns inte (givetvis om bara om bakgrunden också är vit) och man kan fortfarande trycka enter i vilket input-fält som helst och formuläret skickas då via javascriptet!

osCommerce – tableCommerce

Aldrig förr har jag skådat så många tabeller som när jag arbetar med osCommerce. De som skrev basen till osCommerce måste verkligen ha älskat table-taggen. Förvisso var tables nästan oumbärlig för ett antal år sedan när det kom till layout inom HTML, men inte ens om man ser hur tabeller då borde ha använts är osCommerce-koden nämnvärt vacker. Där är nestade tabeller i så många nivåer att det är snudd på omöjligt att upptäcka var den ena börjar och den andra slutar.

iPhone specific pages

I recently learned some tips and tricks for developing webpages for the iPhone. There is really only one major difference that must be there for it to work properly. The viewport-meta.

<meta name=”viewport” content=”width=320; user-scalable=true” />

This meta-tag explains to the iPhone what dimensions the page is intended to be viewed in. If this tag is not supplied the iPhone will assume a width of 980 pixels. This way, even if you have made a page with “small” content it would still be scaled unless you also supplied the viewport-command.

If on iPhone, remember viewport!

Google Blueprint CSS tutorial

This is a basic tutorial of the first use of Google Blueprint as a CSS layout.

Download Blueprint CSS
Download the main library att Google Code, at the time of this writing that is the file “Blueprint 0.7.1.zip”.
http://code.google.com/p/blueprintcss/downloads/list

There are three folders in the ZIP-file, first you have the “blueprint” folder which contains the ready to use CSS-files (ie.css, print.css and screen.css). While there are more files in that folder we will only concern ourselves with those in directly in the “blueprint” folder and not subfolders.

I will not go into detail about the two other folders, for your information the “lib” folder contains YAML source for the project and the last folder “tests” contains sample pages you can play around with if you’d like.

Fast reference PDF
There is a nice “cheat page” you can print out from a PDF, this is optional though but I found it very helpfull at least while learning the new classes.

Link the CSS-files
All you need to do is copy the three CSS-files in the “blueprint” folder into a directory of your choice in the main HTTP directory. I assume you put them in a subdirectory simply called “blueprint”. Next you need to link them in the HTML-files where you wish to use them, add the following code:

<link rel=”stylesheet” href=”blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”blueprint/print.css” type=”text/css” media=”print”>
<!–[if IE]><link rel=”stylesheet” href=”blueprint/ie.css” type=”text/css” media=”screen, projection”><![endif]–>

The first CSS defines how to display the page on normal monitors and projectors. The second file is for printing and the last file, surrounded with an IF condition to only be used by Internet Explorer, is specific instructions for the naughty web browsers that do not follow the standards.

Make a HTML file that uses the Blueprint
I assume you know HTML and CSS so I skip the basics and move straight to the new classes that blueprint offers. Simply put you need an outer DIV of the class “container” that will be the parent object of all others. Inside of this you can decleare HTML code as normal. A real simple first page could look something like this:

<div class=”container”>
<div class=”span-24 last”>
<h1>Hello World</h1>
</div>
</div>

The outer DIV is the container of all objects. The second div defines itself as a “span-24” and “last” class. Span-24 is the max width (950 pixels) and will span the entire area inside the container, last is added to signal this is the final column on this row (it’s also the only so in this case maybe a bit overkill).

Now after this it’s very easy to expand the concept, for example to make a “top headline and under menu + content” layout simply write:

<div class=”container”>
<div class=”span-24 last”>
<h1>Hello World</h1>
</div>
<div class=”span-4″>
The menu
</div>
<div class=”span-20 last”>
The content
</div>
</div>

This still doesn’t solve the more complex aspects of CSS-layout when you need everything to be “just right” but with an overall layout made this easy you can focus on the end tweaking instead of re-inventing the basic wheel everytime you need to make a new design.

Conclusion
The absolute best part about the Blueprint CSS is a “small” feature internally namned “rest.css” which is part of the “screen.css” file. This resets all browser settings to one single setting (Firefox, Internet Explorer etc all have slightly different default values for border, margins, padding etc) making cross platform development much much easier. Secondly, and the acctual main purpose, the ability to easily create new columns and layout modifications really improves start up development time of new designs. While the Blueprint CSS just have very basic settings it’s often these basic settings that screw up every new design I make since I tend to aim a little too high everytime I write a new CSS-class.

CSS layout made easy

While it hurts my nitpicking handcodeing image to admit it, some frameworks are to good to ignore. One of them I found recently in Google BlueprintCSS. It’s a very flexible framework and with a license “you cannot refuse”.

I”ve used to code all CSS and HTML by hand (still!) and it is getting pretty tiresome to stumble over the same defects in every design I make. To pressed for time I’ve never developed a framework of my own, rather just copy and pasted bits and pieces from my old code that I knew was working.

There are many other CSS frameworks out there but somehow I fell for Google Blueprint though I have far from done an extensive testing on them. If anyone have found any other framework very good and flexible please post a comment, I’d love to hear it.

HTML 5.0 Interesting changes

On a slow day at work I finally got time to browse through the changes in the propsed HTML 5.0 standard (Editor’s Draft 6 July 2008). The fith version of HTML will come in two flavours, standard HTML and XHTML. More or less the significant difference is that XHTML will not allow any errors in the XML-structure whereas the HTML-version will render the source as best as it can.

There are some interesting new features incoming by the looks of it, many of them seem influenced by what up until now have been solved using scripts. A quick look at the changes in elements shows us that we are handed the tools to further differenciate between layout and semantic.

Removed Elements
Almost all “legacy”1 layout elements are removed such as BASEFONT, BIG, CENTER, FONT, FRAME, FRAMESET, NOFRAMES, S, STRIKE, TT and U. Most of these are hardly used anymore anyway but I guess there are a few sites out there that will miss the FRAMES-support (allthough IFRAME is still around).  There are a few other removed elements as well; ACRONYM (which is replaced by the aptly named ABBR), APPLET (replaced by EMBED like all other embeded material), DIR (replaced by CSS or simply UL/OL), ISINDEX and XMP.

Added Elements
As previously noted the added elements often reflect semantic structures in HTML. HEADER and FOOTER are two examples, these display as their names implies header and footer information in their current context. This can be used to display chapter headings in a document and other similar information. Also new are the elements ARTICLE and ASIDE which are used to define areas of information in the current document. For example ARTICLE could refer to a single post, a blog entry, a written article or similar and has the ability to stand alone from the rest of the content. An ASIDE is used within an ARTICLE to add information related to the article but to be displayed seperately like in a column next to the main article.

NAV is a new element to mark the navigation of a site. For example “previous” and “next” link are typical navigation elements and should be enclosed in a NAV element.

There are many other new elements in HTML 5.0 but those are beyond the scope of this small review I’m afraid. Read the full HTML 5.0 document for further information.

Changed Attributes and Events
The attribute ACCESSKEY is the only one removed and this is likely due to the addition of the KBD element which replaces it’s functionallity. An interesting addition is DRAGGABLE which is a boolean value which makes an element draggable by the user, this attibute is also followed by several new event types (onDrag, onDragend, onDragenter, onDragleave, onDragover, onDragstart and onDrop). This element togheter with the attribute CONTENTEDITABLE  makes a great couple for future on-line applications.

Other new useful events added in HTML 5.0 are for example onMousewheel, onScroll and onResize which all do what they sound like.

Summary
All in all HTML 5.0 is no revolution but adds some convenient elements for more detailed semantic structures within HTML. It also takes out legacy formating elements and suggests the use of CSS to solve all the layout issues. Hopefully the drafts will soon become a new standard because of what I’ve seen so far it looks promising.

Sources:
http://www.w3.org/html/wg/html5/
http://www.w3schools.com/tags/html5.asp

Footnotes:
1. Wow, this is the first time I’ve used the word legacy in a HTML context! The only other (in)famous element I can think of that was removed is good old BLINK.