Posts Tagged HTML

Backend Layout (Grid View) Feature of the New Typo3 4.5 LTS

For anyone who has ever used Typo3 as a CMS, they would be well aware of the limitations associated with the layout of a page (backend layout) in the administration area.

Without hacking or using third party extensions such as TemplaVoila, it was pretty difficult to get anything more than the Left, Normal, Right & Border columns to add content elements to your website. For someone familiar with Typo3, it wasn’t a major problem, but as soon as you put the administration system in front of someone who was about to use it for the first time, it created nothing but confusion.

With the release of Typo3 4.5, Typo3 developers now have the ability to make a more user friendly admin page for content editors through their new core feature Grid View (Backend Layout).

With ease, we can now give the Typo3 user a more user friendly and intuitive admin page just by creating a few simple backend layout views that only helps people make a better association with the websites design.

I found it very hard to find any decent information online about how to implement the Backend Layout feature, so I’ve decided to put together this little tutorial on how you can get started.

Step 1 : Create Backend Layout
The first thing you need to do is create a system folder to store your backend layout templates.

Once you’ve created the new system folder, choose List (on LHS) > the System Folder > Click the “Create Record” button at the top of the RHS page. Then from there, you should choose “Backend Layout”.

On the next screen that loads, enter your Title (used to easily identify the layout) and click the Grid Wizard icon (pencil and notepad) beside the Config field. It is also a good idea to associate a simple graphical icon to help you identify the layout visually.

 

The Grid Wizard allows you to design a layout, in our simple example we use a Top Left, Top Right and Bottom style layout.

 

One thing to note here is that you MUST enter a Name and Column number for each column of the layout grid. If you don’t do this, you will get a “not assigned” error in the admin page.

The Grid View wizard creates the config code required to make it all work!

E.g.

backend_layout {
colCount = 2
rowCount = 2
rows {
1 {
columns {
1 {
name = TopLeft
colPos = 1
}
2 {
name = TopRight
colPos = 2
}
}
}
2 {
columns {
1 {
name = Bottom
colspan = 2
colPos = 3
}
}
}
}
}

Once you are happy with your layout, you can now begin to apply the layout to the backend page.

 

Step 2 : Apply Layout to Backend Page
This step is very simple, all you need to do is access the page properties of the page you would like the Backend Layout applied to. Choose the “Options” tab and at the bottom of this page, you should see the icons (if you’ve applied one to the layout) of the layout options you have available. If not, you can simply choose your layout from the drop down menu.

 

Step 3 : Apply to Front End Template
Nothing hugely changes much from a front end perspective. We all have our own ways of doing this I’m sure. But here’s a simple example of what we would do:

Layout.html File

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>
<head>
<title>Untitled</title>
</head>

<body>

<!– ###DOCUMENT_BODY### –>
<div id=”topLeft”>
<!– ###TOPLEFT### –>
TOPLEFT of page
<!– ###TOPLEFT### –>
</div>
<div id=”topRight”>
<!– ###TOPRIGHT### –>
TOPRIGHT of page
<!– ###TOPRIGHT### –>
</div>

<div id=”bottom”>
<!– ###BOTTOM### –>
BOTTOM of page
<!– ###BOTTOM### –>
</div>

<!– ###DOCUMENT_BODY### –>

</body>
</html>

 

TypoScript Set Up
page = PAGE
page.typeNum = 0

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/layout.html

page.10 {
workOnSubpart = DOCUMENT_BODY
subparts.TOPLEFT< styles.content.get
subparts.TOPLEFT.select.where = colPos = 1

subparts.TOPRIGHT< styles.content.get
subparts.TOPRIGHT.select.where = colPos = 2

subparts.BOTTOM < styles.content.get
subparts.BOTTOM.select.where = colPos = 3

}

One final thing to do is make sure that you have included the CSS Styled Content in your statics!

That should be enough to get you started with this great new feature! Enjoy!!

Tags: , , , , , , , ,

9 Comments

HTML5 – What’s it all about and why should I care?

In the wonderful world of the Internet and web development, techies love creating the latest buzzwords. But it’s the other marketing types who love to latch onto these buzzwords in some vein attempt to sound technical and of course create a new little industry for themselves that irk me a lot.

The “Web 2.0” buzz term seems to be becoming a little stale in the minds of marketeers, so now they have started to latch onto the latest and greatest development in the world of the web in the shape of HTML 5. We’ve even heard Steve Balmer of the Apple use it as an excuse not to put Adobe Flash on this “i” products. But unlike “Web 2.0”, HTML 5 is actually “something” and not just a concept for marketers to use in their sales speeches.

HTML5 is put simply the next generation of HTML. It is a massive overhaul to once very static and limited mark up language. No longer will we have to rely on third party applications such as Adobe Flash to play videos or even third party javascript to create a WYSIWYG editable form field. From a web designers point of view, this takes away massive headaches. From a web user point of view, it should reduce the number of third party plug-ins required to view a website. There’s so much more to HTML5 that I could easily write a book on it. Suffice to say, it’s definitely an exciting time to be involved in the web industry and be part of this revolutionary change.

Someone posted this image on Twitter today (I’m sorry I can’t remember who you are!) which exlpains it better than I ever could. Even for the non-techie, looking at what features are supported or will be supported by the leading browsers is an interesting read. A lot of people will clearly have to change their browser of choice to be part of this change!

HTML 5 - What is it?

HTML 5 - Click to enlarge!

Tags: , , , , , ,

No Comments

Son of Suckerfish dropdown menu displaying behind other DIVs in IE6

Windows Internet Explorer
Image via Wikipedia

Did you ever get one of those days when no matter what you do or try, nothing seems to work for you?

Well I had one of those days today – a site we are currently working on was giving all of us heartache, so I decided to get my hands dirty and give the lads a dig out.

It was a strange one, we use the Son of Suckerfish method for most of our websites that use drop down menus. Suckerfish is a great way to have a dropdown menu work purely with CSS alone. The only javascript required is approximately 8 lines of code and it’s only there to support non-standard compliant browsers such as Internet Explorer.

All was well and good with this new site until of course it was tested in Internet Explorer 6. For some odd reason the drop down menus were appearing behind other divs on the page and therefore you couldn’t see them. After hours of trying many different things from the z-index to positioning, we couldn’t find a suitable solution. Most solutions would have meant rewriting the HTML code to suit. This was something we didn’t really want to think about as it was only happening in one browser… IE6.

Thankfully I found a great little solution to the issue on a blog (sorry the blog address escaped me now) – it was another few lines of code:

function reIndex(){
forms = document.forms
zi = 2000;
cn = document.getElementsByTagName(‘div’);

for (n=0;n<cn.length;n++){
cn[n].style.zIndex=zi–;
}
}

You just need to call the function from the body tag onload and voila.

This basically reindexes all the divs on your page so that IE6 doesn’t fall on it’s face when you give it something to do that it’s not capable of doing!

Tags: , , ,

No Comments

Where do I stand on web coding standards?

In my business, I’m constantly involved in debates on a regular basis discussing how important developing websites to the latest coding standards actually is.

In most cases, people expect me to be a huge fan of the latest W3C web coding standards. A lot of these people believe that all professional web design agencies should do nothing less than provide my clients with websites coded to the latest web standards.

However the reality is, that although I completely believe in the concept of having web coding standards and that it is for the common good and the future of the Internet, I’m not convinced that every website has to be developed to the latest coding standards right now.

Those that think it is the only way to do websites now are generally egotistical snobs who like to brag about being able to produce standards compliant websites.

I think it’s time to cut out the b*llshit.

Let’s look at the arguments most pro-standards compliant supporters use to justify their cause.

  1. Sites coded to the latest coding standards perform better in the Search Engines
    This statement is simply untrue. A site can perform just as well developed in the old fashioned way as it can in the new way.

    But with all statements related to this topic, it was taken completely out of context and made a fact by those that didn’t really understand what it meant.

    The truth is simple, a properly coded CSS based, compliant standard website should have less code than your old table based website. In theory a search engine should be able to pick up the important content of your website more easily, since there is less code. However, a clean coded website in the old fashioned way can do just the same too.

  2. Quicker and more flexible
    In some cases you can agree with this, but in others you can’t. There are a few things that can be done quickly in HTML that take an age in CSS, but this goes both ways. So I don’t think it’s fair to use this as an argument for the cause.

    Another argument is that CSS based sites download quicker… that too is highly debatable and comes down to how well a site is coded. Here’s a recent study : http://www.decloak.com/Dev/CSSTables/CSS_Tables_02.aspx

    The fact is that in theory a CSS based site will have less code, so it should be a smaller file size. In turn this should relate to a faster download. I completely agree with that.

    However, if the site is badly coded and uses unnesseccary code, it will be the same amount of code as the old way.

  3. Accessibility & Cross Browser Compatibility
    This is one that really gets to me. Most people that use this as an argument don’t really understand what accessibility actually means. So just for you, here’s WikiPedia definition of accessibility:

    “Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible. Accessibility can be viewed as the “ability to access” the functionality, and possible benefit, of some system or entity.”

    My only issue with wikipedias definition is the highlighted part. Accessibility is about access for all (http://www.sustainable-design.ie/arch/adapthouse.htm) not just a few people.

    So unless your site is nearly completely text based, your website will not work in old browsers. Have a look at a browser compatibility chart : http://vzone.virgin.net/sizzling.jalfrezi/stylebml.htm

    For me, it is more impressive for a web developer to have his website work well in all browsers than someone who can just code for the latest browsers.

    To date, most webmasters base their website accessibility test on W3C’s WCAG 1.0, which are just that, guidelines. How many web designers that claim to be 100% accessible have actually sat down with someone who has activity limitations? I would imagine very very little.

    Instead, they use a program to test how well their site is coded. Webmasters being webmasters, have spent years hacking their code to work in different browsers, so you can imagine how easy it is to trick a piece of software that just looks for dodgy code. In theory you could have an inaccessible website, that will pass this test, yet it could be claimed to be accessible. Thankfully WCAG 2.0 will focus more on the actual accessibility rather than the websites code.

    On and just to add more to this argument, you can create an accessible website no matter which route you take in terms of coding standards.

With our clients, we’ll continue to give them the pro’s and con’s of each different techniques. It must be noted that a lot more people care more now about the latest coding standards than working in older browsers.

The change is coming, so make sure you evaluate all issues before deciding on which route to take your website. Both ways have equal pro’s and con’s associated with them.

Tags: , , , , , , , , ,

4 Comments