Aug 6
This is super cool!!!!
9Elements created a completely html page containing nothing more then Javascript and some of the tags that are created in the new HTML version.
This is really amazing as it is really the first time that I see a website that does some things I thought could only be done with Flash. I m overwhelmed with it an I suggest you take a look at it!! Be sure to look at it in an advanced browser ( Google Chrome 3.0, Safari 4 or the latest Firefox 3.5 version).
It is always hard to tell what the future will bring, especially in a world where everything is evolving so quickly. But it’s always good to know what libraries, languages or applications will influence the way we work or the language we code in. There for I took the time to create an overview of what could be interesting in the near and far future. If you have any remarks or other ideas, I would be happy to hear them in the comments.
HTML 5
Jon Von Tetzchner (director of Opera) recently announced that HTML 5 will replace Flash almost completely. Will it go that far? I don’t think so, but what we will be able to do with it is quite impressive!
As you can see the HTML 5 will be an expansion of HTML 4 but with rather important differences. We can expect HTML 5 to get its W3C Candidate Recommendation in 2012 but it will be able to use some of the features sooner. One of those is canvas that is already a widely implemented element.
Serge Jespers wrote a post on his weblog as a reaction on what Jon Von Tetzchner said and you can read about it here http://www.webkitchen.be/2009/05/27/adobe-versus-the-open-web/ He is an Adobe platform evangelist and Adobe pays his payckeck every month, but I do think the guy has a point.
JavaScript 2.0
With JavaScript being more popular than ever this is certainly worth taking a look at. John Resig created a slideshow on what will be changed in the 2.0 version and I must say that it looks promising.
PHP 6
A lot of people swear by the use of PHP over other language (like me 
) and a lot of other people say that PHP just isn’t sufficient enough. They are probably right because there are some insufficiencies in PHP, but in version 6 a few of those will be reviewed and adjusted. For now v6 is available as a developer snapshot so if you want you can already try it out.
Improved Unicode support.
This was a really necessary to keep up with other languages like JAVA that have a better i18n (internationalization) support, in this way PHP will close up the gap it had and support you with a much broader set of characters.
Namespaces
Namespaces are a way of avoiding name collisions between functions and classes without using prefixes in naming conventions that make the names of your methods and classes unreadable. By using namespaces we can never have the problem that 2 classes with the same name interfere with each other. I’m still wondering if this is the best solution but we’ll have to find out in the future. I’m only struggling with the idea that this only moves the problem to a higher level, as you now have to make sure your namespaces aren’t the same.
XML
XMLReader and XMLWriter will become part of the PHP core, which will make it easier to work with XML in PHP.
Magic_quotes and register_globals will be removed from PHP as they are a huge problem in PHP security.
It is from version 6 required to use tags as the ASP-style tags are no longer supported (<% %>)
Those are the biggest changes, again, just like in JavaScript some of these changes are already implemented in a PHP5.3
So in a nutshell, I do believe that PHP has a superb future in front of it, but that is also because of frameworks like Symfony, CakePhp, Zend, etc.
Over the years we have tried to create websites that are displayed correctly on every browser, and sometimes we did manage to get it correct. But it isn’t that easy to get your application configured and coded so that all browsers react in the same way. Basically it comes down to one thing: Create an application for IE and Firefox and then you’ll probably cover 90% of all users.
Off course all Mac users will feel left out, but, in my opinion, those are the 2 major browsers, and if they work correctly it will probably work in Opera and Safari to. Maybe you need to do some minor adjustments, but you will be finished quite fast. My point is to start off with IE and Firefox because the other way around will give you huge headaches.
I saw a good slide show on this topic by John Resig and it is displayed below. You might want to take a look at it, it’s really interesting.
How is it possible that my emails are blocked by spam filters?
I got this question from a few friends and a client and this are the things you can do:
Check your newsletter/email on a spam checker tool
Programmers heaven spamchecker
Lyris contentchecker
The problem for the client was the subject line, in order to get a correct and acceptable subject you need to think carefully about it.
A spam filter recognizes capitals and exclamation marks and blocks your mail on them, so try to avoid that.
Make sure your mail/subject doesn’t contain the words on the list you can find here
And also a few others:
Good luck.
I had a problem earlier today: I needed to have a select box that returns 2 or more values in stead of 1.
I got this far:
The value of the options gets the id of the item that is displayed in each option.
I do have an other value that should be linked on this option. Is there an easy way to do this?
<select id="category" name="data[cat]">
<option label="0" value="12">A</option>
<option label="0" value="7">B</option>
</select>
I tried to do this with entering the second value into a label attribute but then the problem is that i don’t know the correct way to get the label value of the selected option. This is written in Jquery.
To get the selected option I use:
$("#category").livequery('change', function () {
var catId = ($(this)[0].value);
});
the solution seems to be quite simple:
The label attribute is used by some browsers to display the content of the option, so your list box might display two 0 options.
A better solution might be to do the following:
<select id="category" name="data[cat]">
<option value="12,0">A</option>
<option value="7,0">B</option>
</select>
and split the value in the event handler, e.g.
$("#category").livequery('change', function () {
var values = ($(this)[0].value).split(",");
var catId = values[0];
var otherId = values[1];
});
Wasn’t that easy
A lot of people create easy forms but don’t think it trough before designing the page. I listed 5 useful attributes/elements a lot of people intend to forget or simply don’t know why they are using it.
Use get or post to send a form
Get will append the form data to the URL that is set in the action attribute of the form and is used when the form is idempotent. For example on search forms.
Post will not append it to the URL but sent it in the body of the form. It should be used when we are modifying a database or doing a subscription.
What is enctype?
This attribute is used to submit the form to the server; it is only needed when using post. Whenever you use a file field in your form you should set the enctype value to multipart/form-data, otherwise it uses the default value application/x-www-form-urlencoded.
Use tabindex
This creates an order when going from one field to the next using your tab button. When creating complex forms, this might come in quite handy. It creates the opportunity for the developer to indicate the order the form needs to be completed. Every field in the form gets a ‘tabindex’ value starting from 0 with a maximum of 32767.
Connect a label to a field
It’s always handy to have a label for each input field, so you can click on the label and the cursor automatically gets positioned in the input field. The only thing to do is put a ‘for’ attribute in the label and give it the id of the corresponding field as value. Easy and Handy for users
Fieldset and legend
This allows you to thematically group your form elements. The ‘legend’ element gives you the opportunity to create a title on each fieldset and has to be put in between the fieldset tags. Use css styling to create a nice design for the fieldset.
Greetings K.
Jan 7
We are, on a daily basis, creating lists and overviews for users, but it isn’t that easy to create a simple efficient list that is easy to use and has a nice layout. So what are the things that have to be in a list?
- paging when the list is very long
- possibility to order the columns ascending and descending
- show number of results viewable in list
- show number of total results
- total of the results of the shown page
- total of all the results
It is possible that there are a lot of columns, too much to show in one view and then there are different options to go for:
- show only the most needed columns
- let the user decide what fields he wants to show in a settings tab
- use scroll enabled navigation
we prefer the second option, because the layout is then adjusted to the settings of the user, the less info he shows, the better the list is and more readable.
For the layout of list we prefer a darker color for the head part of a list for example #f1f1f1.
The content (body) gets a light color like #ffffff because this part has to be easily readable and for the totals you’d better use a darker color again for example #ECECEC.
As a last hint we recommend you to use light colors and a standard font type like verdana or arial.
Cu next time, K.
Dec 3
Symfony, ah we just love the framework… A year ago we started using this php framework and we wrote a post on it a few months ago (read). In 2005 the creators of Symfony wrote a step by step tutorial on how to build a website with their framework. For me and my colleagues, this was the ideal guide to learn it and get to know the best way to use it.
Now, 3 years later, they are publishing a new 24 hour tutorial called Jobeet. If you want to know more and follow this tutorial, click on the link in the sidebar or here.
A lot of people don’t really know when to use what kind of elements to build up an HTML page therefore I would like to take the time to explain tables and div elements.
Tables are created to display data, they are built for it and that’s the only thing they are good for. To explain this we can take a look at the elements that a table can contain. Thead (again in tags <thead></thead>) contains the header row information of a table, tfoot contains the footer or bottom row of a table and tbody contains the body or data of a table. The easy thing about tables is that you can change them very easily without breaking out of the design, the height is fit automatically and data is displayed correctly the first time you show it. Off course with a little bit of CSS you get the layout just like you want it to. For more information on this you can take a look at my earlier post (http://www.devexp.eu/?p=50)
Now what are div tags actually and why are they better to create a layout?
Div tags are nothing but logical divisions within the content of a page, they are built up with the <div> tag and make it easy to manage and style your HTML page just as you like. The cool thing about div tags is that you can name them individually, so you can affect them with CSS. As you can see the div will react a lot better with layout and give you all the possibilities you need.
The problem with tables is how unreadable and unusable they make your code. When you use a table as base to start from and create different rows and columns you will probably create other tables inside that table to display some content. And maybe you’ll end up with 3, 4 or even more tables within each other. When you have a page like that, please do take the time to look at the code and you’ll notice right away that it became very unreadable. When trying to change 1 column or 1 row you’ll see how complicated it gets. This method was very often used 3-4 years ago in web development but div tags are now getting the bigger hand in this now.
Let’s create a little example to illustrate this issue. This example will create data displayed like this:
| This is a Title | |
| aaa | bbb |
| cccc | |
<table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td colspan="2">This is a Title</td> </tr> <tr> <td width="50%">aaa</td> <td width="50%">bbb</td> </tr> <tr> <td colspan="2">cccc</td> </tr> </tbody></table>
When we try to create this same view built up with div tags you will get:
<div style="width: 100%;">This is a Title</div> <div style="width: 50%; float: left;">aaa</div> <div style="width: 50%; float: right;">bbb</div> <div style="width: 100%;">ccc</div>
I guess the example makes it pretty clear, you write less code and you are very flexible while using the div tags and it makes it very readable.
When creating pages, be sure to think about your design before starting and think of tables as data displayers, not as design tools. It will ask a lot of exercising when you’re not used to work with div tags, but after a while, you’ll see all their advantages. These tags and tables are built with a cause, tag for creating divisions in your page, tables for displaying data. Don’t mix them up.
You are currently browsing the archives for the html category.
Get all our updates directly: subscribe now