html « Tech That!

Posts Tagged ‘html’

Almost all modern websites require some sort of administration, and this usually involves creating a separate administration page where articles can be added and users managed. Lately, I’ve been making quite a few new websites that will be released in the upcoming year, and all of these have been quite simple sites with a single user and where the administration consists mainly of adding simple news updates and updating page text. For these sites, a full blown administration panel is not necessary, and is also quite inconvenient as the user will have to go back and forth to see the results. So, what are the alternatives?

(Live examples are not available at the moment, but might come later)

AJAX driven, on-page administration

Here, the user (the person administering the website) is allowed to edit content on the same page as the content through a rich text area in a popup, and the text is then changed afterwards to reflect the users edits.

The simplest, and in my experience most flexible way of doing this is through named fields. Each block of text on the site gets its own unique name, and is linked to a plain text file on the server. In my small site setups, I usually use a structure like this:

/
 pages/
  about.inc.php
  projects.inc.php
  bio.inc.php
 api.php
 page.php
 index.php

The .inc.php files can either be plain text or contain PHP code. The most important thing is that they have a unique name. The files the usually look something like this (simplified for clarity – remember security and error checking!)

<?php

// page.php
function printBlock($name) {
    if ( !file_exists ( 'pages/' . $name . '.inc.php' ) ) return;
        echo '<div id="' . $name . '" class="editable">';
        require 'pages/' . $name . '.inc.php';
        echo '</div>';
    }
}

// api.php
require 'page.php';
$action = $_GET['a'];
$block = $_GET['e'];
switch ( $action ) {
    case 'get':
        printBlock ( $block );
        break;
    case 'post':
        file_put_contents ( 'pages/' . $name . '.inc.php', $_POST['content'] );
        break;
}

// index.php
require 'page.php';
?>
<!-- HTML structure -->
<!-- Then, whenever you're printing a block or page that should be editable, call printBlock -->
<?php printBlock ( 'about' ); ?>

Next, you will have to make some sort of JavaScript hook to make all editable areas editable. I like to use a combination of CKEditor, a simplified version of lightbox and jQuery so the end result looks something like this when a user double clicks on a box with the editable class:

Upon saving, jQuery sends a AJAX request to the api.php file with the updated contents, and also changes the contents of the block on the page using the .html() method on the element with the same ID as the block name.

In-line administration

On some sites, popup boxes simply won’t cut it. In fact, they might even become a bit cumbersome when working with news articles and such where you might want a live preview of the article as you’re typing it. Earlier, one had to have a rich text editor with a “Preview” button, but now we have a much better tool available: contentEditable. This awesome attribute allows you to tell the browser to allow the user to change the contents of an element on your page at will. Consider these screenshots that illustrate adding a new news post on a page utilizing this attribute for administration:

Before adding the article

Adding a title

Editing the post body

After saving the new post

As you can see, this is a very simple way of creating and editing posts – and immediately seeing how it would look on the page. The major drawback is that you cannot easily accept rich inline content such as images and video, or even simple text formatting. On the other hand, such features often clutter the articles anyway. On this site, I have overcome this by allowing file attachments that are placed beneath the article based on their type (images are shown in a gallery strip, videos are embedded, etc.) Text formatting is achieved through a markdown-like syntax handled by JavaScript. There is no rich text logic in the backend.

Using contentEditable is quite simple. All you have to do is use JavaScript’s setAttribute/removeAttribute functions on any element you want to be editable. Set the attribute to true when you want it turned on, and remove it when you want it off. Apart from this, everything is quite straight-forward and very similar to the previous method of popup administration. JavaScript sends the new content to the backend, which saves it and returns the HTML rendering of the content as it would be displayed when loading the front page regularly. JavaScript then swaps the editable post area with the HTML from the server and disables editing on it.

Rounding up

Both these techniques provide quite intuitive and easy-to-access administration equivalents to classical admin-panel interfaces. They are not especially complex to build either, though they provide the user with a more comfortable and usable way to manage their sites. If you have any questions regarding these techniques, don’t hesitate to use the comment field below or e-mail me at jon <you know what goes here> thesquareplanet <and you know this one as well> com.

Written by Jon Gjengset

December 30, 2009 at 01:12

Posted in References, Tech

Tagged with admin panel, administration, ajax, backend, contentEditable, design, development, edit, frontend, html, javascript, php, ui, user interface, web, web page, website

Jump-starting tricks for aspiring web developers

The only 5 tags you’ll ever need

HTML and XHTML both contain large amounts of tags. Too many, in fact, for them all to be useful in most cases. Remember, XHTML (and HTML to a large degree) aims to describe the structure of the content, and that is what we have all the tags for. To make the content readily available to screen-readers, text-to-speech engines, search engines and the likes. When prototyping a design, however, you should rarely make use of all of, for instance, the subtle difference between an <strong> and a <b> tag. In fact, you probably shouldn’t even care about the difference between an <em> and a <strong>; you would probably substitute them both with a <span> anyway. Although you should put in the appropriate tags when you begin to develop larger websites, or when you begin to polish the smaller ones, you will find that there are only 5 tags you really need when building an initial design.

<span> – The fundamental inline element
<div> – The fundamental block element
<a> – The link
<img> – The image
<ul> – For making lists

Although coding your site using only these tags may be considered bad practice for the reasons explained above, they will in fact get you started quickly and substantially reduce the amount of tags you have to keep in your head when you’ve just started making web pages.

Due note that these are only content tags, and not the additional meta tags such as <link>, <style>, <script> and <meta> that you will also need to style and animate your site.

Reset your styles

The #1 reason why your designs do not work when you try to open them in a different browser from the one you initially developed and tested in is because of default margins and paddings. Every browser has its own definition for what padding and margin every element should have if you don’t specify any, and consequently, when you move to another browser, all your elements become slightly smaller or larger, and your design collapses into an unrecognizable heap of divs for no apparent reason.

Although reset stylesheets (google it) have recently become quite popular, I often find them unnecessary as they tend to reset too much – giving you more work. Instead, I just a good old rule which simply resets the margin and padding, and nothing more:

* { margin: 0; padding: 0 }

Try putting this in your document before you begin, and you’ll find cross-browser design becomes a whole lot easier!

Understand the box model

Way too many web developers don’t understand what the difference between margin and padding is, and how these are rendered together with the border of the element. Much less how to calculate the total dimensions of the element. The fact of the matter is that this is essential to being able to create potent web sites. It is also the alpha-omega of many of the CSS hacks you will encounter through your web development career.

A simple Google search reveals several images and sites trying to explain it, and one of the first results explains it quite simply:

Learn it by heart – it will save you much hassle and confusion!

Face the truth – learn to program

If you’re going to make any decent web site, you will have to learn how to program. And I’m not talking about plain ol’ HTML, I’m talking of at least Javascript, and preferably a proper server-side language such as PHP or ASP. Javascript allows you to manipulate your site dynamically to make your site a lot more interactive. For instance, you can use it to show a date-picker for an input field, validate form input without going through the server (though for security reasons you should ALWAYS check the data on the server as well), update the page behind the scenes without the user having to refresh the page (AJAX) or make elements on your page fly all over the place. All this power, however, becomes nothing but a fun topping when you consider a server-side language.

Where Javascript deals with the page the user is seeing, the server-side languages allow you to store data the user submits, add dynamic content to your site (This can be anything from a simple “Quote of the day” to allowing users to add articles, list recently added articles and show all articles using the same HTML, allowing the scripting language to fill in the content) and track user sessions (i.e. login and have their own preferences and personalized pages).

Personally, I prefer PHP to ASP, but this is completely up to you – Just learn one because you will have to!

Use a JavaScript library

Javascript is a wonderful thing, but it also quite awkward. In order to do even simple animations, you need to write a lot of code. In addition, Javascript lacks the broad set of tools that often comes with larger, self-contained languages. There are many libraries out there that attempt to “fix” Javascript in one way or another. Some simply make it easier to manipulate the DOM (Document Object Model) and do animations (jQuery is a typical, and extremely popular library that aims to do this), whilst others go all the way and manipulate Javascript’s native methods and objects to make them more powerful, more usable and more flexible. A good example of the latter is the Javascript framework/library MooTools. For larger, more complex Javascript-enabled projects, such a framework is often preferred over the lightweight jQuery equivalents. Pick the tool for the task at hand.

Know your clients

When developing a website, you need to know what browsers and resolutions you are developing for. If you are making a site for a design bureau, you can usually assume that they will have high resolution screens of at least 1280×1024 or 1600×1400, and you should design your site accordingly. In such cases a fluid design layout might be worth considering to allow your users to utilize the full resolution of their screens. More commonly though, you will be designing for the majority of users, and the majority do not have resolutions of that scale. Too many users still use a 1024×768 resolution, or even smaller, and consequently we have to take this into consideration. Usually, making a page between 900px and 950px wide makes the site viewable for most users, and at the same forces you to avoid extraneous information.

Also, determine whether you should support IE6 or not. This is a major issue as supporting IE6 requires a lot more work than not supporting it because of its blatant disregard for standards and ridiculous implementations of it at times.

A word of caution: If a designer hands you a design with a page-width wider than 950px, don’t just scale it down and get on your way! This will not only distort the design, but it will also make all the text smaller which you should avoid at all costs. Make sure all text on your site is easily readable, and try to keep to a maximum of 15 words per line. Anything smaller makes it hard to read, especially on high resolutions!

A second word of caution: Not everyone has Javascript enabled! Make sure you either provided a usable scaled-down version of your site without JS, or that you warn the user that your site requires Javascript. Don’t just leave it up to them to find that nothing works..

Prototype, then validate

If you’re told to make a design, make a quick and dirty mock-up. That is not to say it should not look like the design, but that you shouldn’t care too much whether your prototype validates or uses the correct tags. Those kinds of things can be changed later if the design is approved. Designers change their mind all the time, and you don’t want to spend a lot of time on something they are going to change or remove entirely at the next signpost.

When you’re prototyping, however, do try to make the site look similar in all target browsers. The reason for this is mainly because if you make it work in one browser and OK the design, and then, when told to make the site to the design you OK’d, you might find that what you did in that one browser cannot be done in another due to different implementations of the standard. Then what are you going to do? You OK’d the design, remember?

Follow standards, but not blindly

Standards are a good thing – no question about it. The problem is that at times, it can be a bit too strict. Especially when trying to make your pages render correctly cross-browser.

For instance, IE6 only supports the CSS :hover attribute on <a> elements, and as such, you may be force to put divs, or other block-level elements, inside an <a> tag which will not validate. It will seldom create any problem in any other browser, so theoretically you could just ignore the validation warnings. The problem is that all too many people are concerned about whether their code validates or not. Bottom line is, if it works, and you’re confident that it works, and will continue to work cross-browser, the warning is really not that important.

That said, if you can follow the standard and validate your site, do so. It is a form of guarantee that your site design should not be broken by future browsers that might have different rendering engines or follow newer standards. Often, when you’re code doesn’t validate, it is quite simple to fix the issue. The fix also tends to come at the expense of a degraded experience to IE6 users…. Oh well, that’s sad isn’t it?

Plan for security, but delay the implementation

When developing web applications, security should be a major concern. Unfortunately, it is often completely overlooked, or applied seemingly haphazardly; “Oh, I think I’ll just put in a striptags here and we’ll be good to go!” Not thinking about, and planning, for security can cost you very dearly in the end.

On the other hand, security takes a lot of time and effort to implement, and in the initial stages of web development – when prototyping a new concept or design – you don’t really want to bother with that kind of thing. The danger is that once the prototype is complete, you decide to skip the extra work and simply continue work on the prototype with all its hacks, shortcuts and security holes. Don’t do it! Instead, plan you security measures thoroughly from the beginning. Do not simply say: “We’ll run striptags on all output and addslashes on all input”, but set out an abstraction layer which allows you to secure all input and output, not matter where it’s going. Decide on security policies and content rules beforehand, instead of patching your old code when someone breaks your system.

This might seem like a lot of work, and it is! It is, however, also very necessary to prevent all sorts of nasty security breaches. The upside of course is that you do not have to implement these security measures when prototyping. In fact, you SHOULDN’T implement them at this stage. Prototyping is about coming up with something workable quickly to see if it works as intended and according to plan. This does not require excessive security precautions. Just remember to put them in when you begin developing the real system.

Use as few images as possible and merge those you can

Everyone does not have a fast internet connection. In fact, there are still those out there browsing the web on a 56.6kbit modem, and although they are a minority, it should tell us that the excessive use of images and other external media is not exactly taking care of your users. Rather the contrary. That is not to say that you should never use images on a site, in fact images are usually essential to a visually appealing website. The danger is excessive use of media.

A common misconception about external media on web pages is that as long as one uses small images, everything is fine. The truth is that the fewer files the browser has to fetch, the better. Every new request to the server comes with overhead and delay waiting for the server to send its response. Where you can, merge together your images and use CSS sprites to display only the part you wish to show. This saves you from the overhead and increases the overall compression rate of your images.

Don’t make a mess – modulate

When you develop websites, it is all too easy to put everything in one file. When prototyping this makes your development speed much higher, but as your system grows it will soon become slow and unmanageable. Instead, try to split your system in to logically separated units. A good place to start is to implement a MVC oriented framework for your site.

Avoid the lazy fallbacks

If you can’t understand how to do something the first time around, don’t fall back to the easy solutions.

Tables are for tabular data
Absolute positioning is for overlay windows
Frames are an absolute no-no

Instead, try to learn something new, and ask someone who knows more about the problem than you do to help you out.

When asking for help

If you are not already a programmer, do not make the mistake, as many do, of demanding answers or asking for a piece of code instead of advice. There are plenty of skillful people out there willing to help, but they will not help you if:

You do not ask nicely
You do not provide source code and other relevant material for them to examine for problems
You ask for the complete solution
- Rather than saying “I need a script that does x”, try to make one that does it yourself, and then ask: “I’m trying to do x, and have come up with y. I seem to be stuck because of z. Has anyone got a suggestion about how I might accomplish this?” where y is your source code and z is your problem.

Essential hacks and gotchas:

In the world of web development, there are some gotchas that are very very common, but are not too often explained. I will try to bring up some of those here:

The “overflow: hidden” fix:

Say you have the following code:

<div>
<div style="float: left; height:200px;"></div>
<div style="float:right; height: 300px;"></div>
</div>

How tall would you guess the parent div to be? 200? 300?

It will in fact be 0px tall. The reason is that the browser does not count floated elements when considering the height of the element. This “bug” becomes very apparent if you, for instance, try to position something absolutely a certain distance from the bottom within the parent div, because that element would really be position from the bottom of the tallest NON-FLOAT element within the parent.

There are several fixes for this problem, but the most common (and cleanest) method is simply to put the style “overflow: hidden” or “overflow: auto” on the parent. For some reason the browser then takes the floating children into account and correctly sets the height of the parent.

Absolute positioning

Consider the following code:

<div style="margin: 50px;">
<div style="position: absolute; top:50px; left: 50px;"></div>
</div>

Where would you say the child div would be positioned in relation to the browser viewport? At (100, 100)? You would be wrong. The correct answer is at (50,50). The reason for this is that absolute positioning is considered relative to the first parent element that has been given a “non-flow” position. That is, any element that has its “position” style set to something else than “static”. If no such parent exists, it is positioned in relation to the viewport. A quick fix is simply to set the style declaration “position: relative” on the parent you want to absolutely position the child in relation to. Because relative positioning does in fact not move the element at all unless left and top are specified this means the rest of the page is not affected, and we can get on with our work.

Due note however, that doing this means that ALL absolutely positioned children of the element that receives “position: relative” will be positioned relative to that element. Thus, you cannot have two children elements where one should be relative to the viewport and one relative to the parent.

Full height column backgrounds

A common design layout is one which has multiple vertical columns (often two or three) next to each other. In the designs, these columns almost always are the same length, with the background color extending to the very bottom of the elements. The problem is that whilst this is very much possible in Photoshop, in HTML an element is only as large as its content or as large as you specify it to be. And unfortunately, CSS does not allow you to specify an element to be as tall as another element. Therefore, if you have multiple columns, and at least one of them has content that will vary in height, you will inevitably end up with the columns being different height. If you then set a background color on each of them, you will notice that the background color is only drawn on the element, thereby making it very obvious that the columns are not the same height.

So, how do you make the columns appear to both be as high as the tallest column? Faux columns. In essence, this approach depends on the parent being as tall as the tallest of the children – which it will be unless we’re floating the columns; in which case we can apply the “overflow: hidden” trick. A background image containing all column backgrounds is then applied to the parent and repeated down its entire height. Read the link for full implementation details.

Working with IE

Let’s face it – IE makes our life terrible. With IE8, Microsoft is starting to get it right, but IE7 and particularly IE6 gets a lot of things wrong. Luckily, the fact that they don’t follow the standards also gives us several methods of giving specifically tailored instructions to IE. There are two ways of approaching IE specific hacks – the quick, simple way, and the longer but better way:

The quick fix

Targeting IE6 in CSS: Prefix your selector with “* html “

Targeting IE7 and 6 in CSS: Prefix the attribute with a star (no space between the star and the attribute) – Note that this hack will invalidate your CSS!

The good fix

Use the Internet Explorer only Conditional Comments

Jumping pages

Okay, so you’ve made you site perfect. It is centered, looks beautiful and navigation is smooth as a kitten’s hair. Just one more page to test – the “About us” page with lots of text… As you click the link, your entire page jumps slightly to the left. You try to figure out why, and notice that you now have a scrollbar which means the center of the page has moved, and so, dutifully following your CSS, the browser has moved you page to the new center.

The solution to this annoying problem is to make sure that the scrollbars are always present, but are grayed out when there is nothing below the fold. And how do you do that? Like this:

html {
	height: 100%;
}
body {
	min-height: 100.1%;
	overflow-y: auto;
}

Centering

CSS has many ways of centering, to the confusion and irritation of most developers:

text-align: center – This makes inline elements center horizontally in its parent element

vertical-align: middle – Should be applied to inline element and sometimes centers and element vertically if you’re lucky (press “sometimes” for more details)

margin: 0 auto – Centers a block-level element by setting its left and right margins to the same value. Here, IE of course has to mess up the beauty, and requires the parent to have “text-align: center” in order for it to work. Remember to reset the text-align to left inside the element!

position: absolute – This one requires a bit more explanation. The idea here is that you position an element in the center of another by moving it 50% from the top and 50% from the left, and then move it back by half its dimensions using a negative margin. For example – if you wanted to center an element that is 400x200px within its parent, you would first of all set “position: relative” or similar on the parent (see the Absolute positioning headline further up in this post), and then you would set the following styles on the element itself:

position: absolute;
/* Center vertically */
top: 50%;
margin-top: -200px;
/* Center horizontally */
left: 50%;
margin-left: -100px;

If this does not make sense, read it again.

display: table-cell – This quite new method relies on using CSSs ability to render any element as if it was a table cell, and then using the vertical alignment property of a table cell to center the content. It is especially good for centering text! View it here.

Use a Doctype

A Doctype is not something one puts in simply to make the page validate, it does actually have an effect as well. In the case of some browsers, the determine whether to render the page according to the standard or not based on the presence of a Doctype. Therefore, put it in!

Final words

This non-exhaustive list contains my experiences from web development so far, and will probably be expanded upon by both me and hopefully some of you (use the comment field below!). Use it for what its worth, and avoid the pitfalls that are all too easy to fall into when one is new in the field. If you have any questions or comments regarding these notes, feel free to post your comment below, and I’ll do my best to give you a proper response!

Happy coding!

Written by Jon Gjengset

November 17, 2009 at 12:47

Posted in References, Tech

Tagged with box model, css, development, hacks.gotchas, help, html, javascript, jump-start, programming, prototype, prototyping, reference, security, standards, tags, tricks, validation, web, web developer, xhtml

The prospects of HTML 5

Brief overview of new features

HTML 5 provides a plethora of extensions and changes to traditional HTML, and to get a complete overview I suggest your read the W3C Draft which makes for very interesting reading once you can look past the RFC style. There are however a couple of features that are especially interesting:

The whole language will be based on DOM definitions, which makes the border between Javascript and the HTML quite a lot thinner.
HTML 5 attempts to discard the remaining style-based tags of HTML, as well as remove support for frames and other “ugly” practices
It is also developed to accommodate the way modern websites are structured, and make the structure more available to computer interpretation. For instance, instead of using divs for all sorts of site content, HTML 5 introduces specialized tags for the different sections of a webpage such as:
- <header>
- <footer>
- <article>
- <aside>
- <menu>
- <section>
A new way of handling element contexts ( i.e. moving away from the differentiation of inline and block context )
Native Drag-and-drop and Copy-Cut-Paste APIs
Undo history and editable content
Support for geolocation-enabled applications
Native multimedia tags and players to avoid the format challenges developers currently face when adding multimedia to their sites

There are several more, but again, I recommend having a look at the W3C Draft for a more in-depth description.

Multimedia

HTML 5 introduces two especially interesting tags: <audio> and <video>. These tags are quite simple, but very powerful. They both require nothing but a source file to play, but they not only provide a native, integrated player for the given content format, but it also provides a scriptable API to manipulate the controls and playback from a scripting language like Javascript. No more proprietary or hard-to-customize flash players with limited format support!

Draggable, copy-paste and undo

The draft also introduces two new concepts that are still under heavy debate with regards to the implementation: Native drag-and-drop support and a copy-paste API as an extension of the draggable support ( since according to the draft, you “drag” the copied content into the clipboard, and “drop” it back from the clipboard ), and an undo-redo history API.

The draggable support will remove the need for a third-party drag-n-drop library such as jQuery-UI, mootools or Prototype, and let the browser deal with this directly. Not only will this probably provide a smoother user experience, but it will most certainly enable you to build more flexible UIs since the W3C Draft dictates a lot of event triggers and intermediate controls that let you handle the dragging in high detail.

Undo history is probably the most controversial feature of the W3C Draft as no good standard definition of it has been found. From the draft one can nonetheless extract some useful indicators of how the final feature will work.

According to the current definition, the undo/redo history will store all changes to the website DOM, and allow the user to revert to previous version of the page. Most probably, it will also allow control hooks that enable you to do server actions when the user walks backwards or forwards through the history.

So, you might ask, why would I need DOM history? Well, both because you will now be able to use AJAX page loading without breaking the back button, but also because of the new attribute “contentEditable”:

Editable HTML content

HTML 5 brings a seemingly innocent attribute called “contentEditable” which, when enabled, allows the user to directly manipulate the DOM through for instance a rich-text editor, or however the browser developers decide to implement the feature. This makes for a whole new type of webpages where you can let the user completely redesign the site to his or her own liking, and where the changes may be saved for later use. And just imagine the advantages with regards to rich-text editing for blogs, articles, or indeed any other web content.

Geolocation

A new API has also been deviced to encourage the use of websites for portable devices or other GPS enabled computers. The API allows the website to read the users current location, as well as any updates to this. This will also enable developers to build applications that are location-sensitive, and give you data relative to your location.

Other scripting changes

With HTML 5, W3C has also had a look at commonly requested features and features implemented by the major Javascript frameworks. This has lead to the standardization of certain long sought-after components like:

getElementsByClassName
Input fields with native validation support ( type=”date, datetime, email, url, telephone…”, the “required” attribute, etc )
Support for unlimited additional attributes for internal use as long as they are prefixed by data-
Independent inputs – input fields may be placed outside a form tag, but still linked to the form itself
Client-side storage – a simple key/value-pair local database accessible through Javascript which will probably bring a great deal more offline web applications
The progress/meter tags – A way of visualizing progress or numerical values to the user without the use of ugly table/css hacks.
Anchor ping attribute – This new attribute allows you to specify a list of URLs that should be pinged if the user clicks a link to avoid redirects to log link clicks, and make them asynchronous instead.
The canvas tag

The <canvas> tag is also a very promising new feature, that enables developers to draw directly to the users screen. This makes way for Javascript-based games, handwriting-enabled applications, Javascript movies, and who knows what else. If you’re running Chrome ( Firefox and Opera also work, but cause a great deal of lag ), you can have a look at the kind of things that can be done at http://www.chromeexperiments.com/.

So, when can I use it?

Since HTML 5 is aimed at being backwards compatible, you can start to implement it today, though many users will probably not receive the full experience of the markup in a while. A good reference might be molly.com’s A Selection of Supported Features in HTML5. You might also want to make use of the Javascript HTML 5 detection library Modernizr.

What about CSS 3?

CSS 3, however amazing it might be, is not a part of the HTML 5 standard. Also, support for this the CSS 3 Draft is not very broad either. I will probably post an overview of it at a later date as well.

Tech That!