In my previous blogpost about the new HTML 5 elements, I wasn’t totally sure how I would implement the part which contains an overview of my blog posts.
Currently I implemented it as a regular div but apparently I missed a certain element completely; the main-element.
A good explanation about the purpose of the main-element can be found at the blog of Silvia Pfeiffer, an expert at the W3C for video-related workgroups.
This element will replace the regular div for my … well … main content.
HTML 5 was something I wanted to look at quite some time now and I finally reached it on my todo-list.
I eventually want to do the new certification exam of Microsoft about HTML 5 so I decided to take their requirements as a guide to learn HTML5.
You can find the requirements for the exam at the Microsoft Learning website.
Let’s start right away with the first requirement.
Create the document structure.
This objective may include but is not limited to: structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside); create a layout container in HTML
Ok, this seems the most basic requirement to know about HTML 5.
The Mozilla Developer Network has a nice list of all HTML elements so this will be my starting point.
As I see it, updating an existing site to HTML 5 is the best way to start learning those new elements so, as a reference, I want to use my blog (which I didn’t update that frequently) and try to “convert” it to HTML5.
Let’s start with the header which is quite empty.
It just contains a title, some nerdy line of code and a navigation.
When reading the list at the MDN, it seems the HTML5 header element is the right man for the job!
Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.
<header>
<h1>Caffeine to code</h1>
<p>
Coffee coffee = new Coffee(); coffee.ConvertToCode();
</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Webdevelopment</a></li>
</ul>
</nav>
</header>
You will also notice the new nav-element which doesn’t need any more explanation.
Defines a section that contains only navigation links.
So far so good; we have the header.
Next on the list is the content block of which I’m not entirely sure how to implement this.
Should I add a section element first so I can seperate the header and footer nicely?
When reading the MDN documentation about the section-element, however, a regular div seems to be the most logical element to use.
Do not use the
<section>element as a generic container; this is what<div>is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
Searching Google also confirmed my first gut feeling: http://html5doctor.com/the-section-element/
Don’t use it unless there is naturally a heading at the start of the section.
The article on html5doctor actually contains a link to a very handy tool called HTML 5 outliner.
If I would create my HTML with the section element, I get the following outline:
HTML
<header>
<h1>Caffeine to code</h1>
<p>
Coffee coffee = new Coffee(); coffee.ConvertToCode();
</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Webdevelopment</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1> Telerik </h1>
</article>
</section>
Outline
Caffeine to code
Untitled Section
Untitled Section
Telerik
If I do it without the section element:
HTML
<header>
<h1>Caffeine to code</h1>
<p>
Coffee coffee = new Coffee(); coffee.ConvertToCode();
</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Webdevelopment</a></li>
</ul>
</nav>
</header>
<div>
<article>
<h1> Telerik </h1>
</article>
</div>
Outline
Caffeine to code
Untitled Section
Telerik
There is still an undefined section in my second example but this refers to my navigation-element which doesn’t need a title in my opinion.
The untitled section in my main content block, however, does indicate I’m using the section-element wrong so I will stick to the div element here and use several article elements in it.
What do you think?
Now, let’s take a closer look to the several blogposts on the page.
As you can see they indicate the date of each blogpost; how can we represent this?
<article>
<h1> Telerik </h1>
<time datetime="2010-11-26" pubdate>November 26, 2010</time>
<p>
My first article
</p>
</article>
The article on html5doctor explains it better than the one on MDN.
If you want to show the date as it is now defined in the datetime-attribute, you can just add it between the opening and closing tags.
Adding the date in the attribute allows me to add any text I want between the opening and closing tags.
The pubdate indicates the publication date of the article. If I would place this outside the article-element, it would indicate the publication date of the entire page (and then only one time-element with the pubdate attribute can exist).
Next to the overview of my blog articles I have three seperate blocks to show my most recent posts, my categories and my archive links.
These blocks can be represented as aside-elements.
Again the html5doctor website explains it very clearly: http://html5doctor.com/aside-revisited/
<div>
<aside>
<h2> Most recent posts </h2>
</aside>
<aside>
<h2> Categories </h2>
</aside>
<aside>
<h2> Archive </h2>
</aside>
</div>
And last but not least: the footer.
Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback
<footer>
<p>
© 2013 - Caffeine to code
</p>
</footer>
Great I’ve updated the main page of my blog to HTML 5!
Off course this doesn’t cover all the new HTML 5 elements but when diving deeper into HTML 5 I will learn them along the way so let’s wrap it up for today!
Next step in the list is:
Write code that interacts with UI controls
This objective may include but is not limited to: programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphics
I’ve upgraded the Telerik ASP.NET AJAX-controls to the latest version this week (2010.3.1109) and experienced some problems with the AsyncUpload-control.
I always check the release notes of the newly released versions but nothing indicated breaking changes:
- Added: Silverlight Module
- Added: Inline Progress indicator
What’s Fixed
- Fixed: RadAsyncUpload now works with Forms/Windows authentication and Anonymous Authentication disabled as long as there is Silvelright installed on the client’s browser
- Fixed: RadAsyncUpload manual server-side validation not working
However when compiling our project I got the error that the property InvalidFiles didn’t exist for the AsyncUpload-control. I used this property to check if any file was selected with the wrong extension and show the appropiate error message.
I’ve contacted the Telerik support for this with the following answer:
With RadAsyncUpload we wanted to undertake a different approach in handling files. In RadAsyncUpload the FileUploaded event is fired for each and every uploaded file and the event argument object of that event contains IsValid property, which specifies whether the uploaded file is valid or not. You can use that event in order to perform actions regarding invalid files. Despite that, I believe that it might be a good idea to bring back the InvalidFiles collection, or at least a property to RadAsyncUpload specifying whether there are invalid files or not.
So they will include the property again in one of the following releases. When trying to implement a fix I noticed that the browse control is now filtering automatically on the allowed extensions set on the AsyncUpload-control.
Automatically filter the files on the allowed extensions
A nice upgrade! No need to validate this myself anymore!
At first I was a little bit frustrated about the breaking change (without mentioning it in the release notes) but the new implementation is actually much better!
Thank you Telerik!
I’m currently in the progress to migrate our current website (www.smashforfun.be) to WordPress.
Because it will be used primarly as CMS, I’m using a lot of plugins and one of them is Contact Form 7.
A great plugin to rapidly create a form on your website/Wordpress but… I was lacking one functionality. Numeric validation.
Because Contact Form 7 uses modules it was fairly easy to create a module (right-click and Save as) myself.
The only thing you need to do is add a error message in includes/functions.php (in the folder of Contact Form 7).
And that should do the trick… well… there was a problem when I added a new element to the messages array. My WordPress didn’t work anymore. When I add a new element something terrible happens I guess 
For now, I just replaced an existing error message (which I don’t use right now) but if someone knows what causing this issue… please do tell!
Last week I’ve been to the Antwerp Zoo (I think it has been 6 years that I’ve been to the zoo) and took my camera with me (a Canon 1000D)…
These are the first two pictures I’ve choosen from the ones I’ve shot there:
Okapi
A monkey at the Antwerp Zoo
A couple of days ago I was asked if I could create a little intro for a website.
The person, who asked the question, showed me some examples… in Flash…
I’ve never been a fan of Flash websites so I was thinking if it would be possible to create an intro in jQuery?
Well let’s get started! Example of the jQuery intro…
HTML
The HTML-code is quite straightforward:
<div id="intro"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Phasellus id enim ut turpis dictum tincidunt.</li> </ul>
<ul> <li>In tincidunt metus ut arcu ultricies a tempus est pretium.</li> <li>Nam tristique ultricies nunc, at ultrices nulla fringilla quis.</li> </ul>
<ul> <li>Sed sit amet ante ut enim aliquam pulvinar a sed eros.</li> </ul> </div>
CSS
Nothing special here; the only important thing is the position: absolute so the text will always come from the same spot.
#intro { margin-top: 25px; }
#intro ul { position: absolute; }
#intro li {
font-size: 28px;
margin-bottom: 15px;
}
Javascript
if(jQuery) {
var listItems = new Array();
var next_index = 0;
$(document).ready(function() {
// hide each list in the div intro
$("#intro ul").each(function() {
// add each list to a global array
listItems.push($(this));
// position each list outside the screen
$(this).children().css("margin-left", -700);
});
// start the intro
animateList(listItems);
});
function animateElement(elements, index) {
if(!index) index = 0;
var next_childIndex = index + 1;
if(next_childIndex > elements.length) {
// all listitems of the list has been animated; hide the complete list
$(elements[0]).parent().animate({
opacity: 0
}, 1000, function() {
// start animating the next list
animateList(listItems, next_index);
});
return;
}
var element = elements[index];
// start animating the current listitem
$(element).animate({
marginLeft: 10
}, 3000, function() {
// start animating the next listitem
animateElement(elements, next_childIndex);
});
}
function animateList(elements, index) {
if(!index) index = 0;
next_index = index + 1;
if(next_index > elements.length) { return; }
var element = elements[index];
var itemChildren = new Array();
$(element).children().each(function() {
// get each listitem from the current list and add them to an array
itemChildren.push($(this));
});
// start the animation of the listitems of the current list
animateElement(itemChildren);
}
}
Credits for most of the code: wait for each jQuery on StackOverflow
Het filteren van een Telerik RadGrid is doodeenvoudig. Je zet de property AllowFilteringByColumn op true en dat is het eigenlijk. Nu is er een probleem als je niet wil filteren op tekst maar op datum en niet louter op 1 datum maar tussen bepaalde datums…
Daarom moeten we een eigen filter gaan maken; wat vrij eenvoudig is.
In plaats van
<telerik:GridBoundColumn HeaderText="Datum" UniqueName="Datum" DataField="EventDate" AutoPostBackOnFilter="true" />
moeten we nu gebruik maken van
<telerik:GridBoundColumn HeaderText="Date" UniqueName="EventDate" DataField="eventdate">
<FilterTemplate>
<telerik:RadDatePicker ID="dateFrom" runat="server" ClientEvents-OnDateSelected="FromDateSelected" SelectedDate='<%# fromDate %>' />
<telerik:RadDatePicker ID="dateTo" runat="server" ClientEvents-OnDateSelected="ToDateSelected" SelectedDate='<%# toDate %>' />
<telerik:RadScriptBlock ID="scriptFilterEventDate" runat="server">
<script type="text/javascript">
function FromDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var ToPicker = $find('<%# ((GridItem)Container).FindControl("dateTo").ClientID %>');
var fromDate = FormatSelectedDate(sender);
var toDate = FormatSelectedDate(ToPicker);
if (toDate != '') {
tableView.filter("EventDate", fromDate + " " + toDate, "Between");
}
}
function ToDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var FromPicker = $find('<%# ((GridItem)Container).FindControl("dateFrom").ClientID %>');
var fromDate = FormatSelectedDate(FromPicker);
var toDate = FormatSelectedDate(sender);
if (fromDate != '') {
tableView.filter("EventDate", fromDate + " " + toDate, "Between");
}
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();
var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
return formattedDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
Ok, het is een aardig stukje code meer maar als je het eens rustig bekijkt, is er eigenlijk niets aan.
Wat willen we nu juist doen?
Aangezien we gaan filteren tussen bepaalde datums, moeten we dus eerst en vooral de standaard tekstvelden gaan vervangen door twee kalenders.
Dit kunnen we eenvoudig doen door een <FilterTemplate></FilterTemplate> te gaan definïeren voor onze kolom en tussen deze tags onze twee kalenders te gaan plaatsen.
<telerik:GridBoundColumn HeaderText="Date" UniqueName="EventDate" DataField="eventdate">
<FilterTemplate>
<telerik:RadDatePicker ID="dateFrom" runat="server" />
<telerik:RadDatePicker ID="dateTo" runat="server" />
</FilterTemplate>
</telerik:GridBoundColumn>
Mooi zo! We hebben nu twee kalenders bovenaan onze kolom.
Nu moeten we nog de code voorzien om de grid te gaan filteren als we een datum hebben gekozen. We mogen pas dit event gaan uitvoeren als zowel de begin- als de einddatum is gekozen.
De events gaan we gaan uitvoeren via Javascript; daarom voegen we aan onze twee kalenders de methodes toe die worden uitgevoerd wanneer er een datum wordt geselecteerd.
<telerik:GridBoundColumn HeaderText="Date" UniqueName="EventDate" DataField="eventdate">
<FilterTemplate>
<telerik:RadDatePicker ID="dateFrom" ClientEvents-OnDateSelected="FromDateSelected" runat="server" />
<telerik:RadDatePicker ID="dateTo" ClientEvents-OnDateSelected="ToDateSelected" runat="server" />
</FilterTemplate>
</telerik:GridBoundColumn>
Goed, nu de Javascript-methodes zelf:
<telerik:RadScriptBlock ID="scriptFilterEventDate" runat="server">
<script type="text/javascript">
function FromDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var ToPicker = $find('<%# ((GridItem)Container).FindControl("dateTo").ClientID %>');
var fromDate = FormatSelectedDate(sender);
var toDate = FormatSelectedDate(ToPicker);
// filter alleen de tabel als we de andere datum al gekozen hebben
if (toDate != '') {
tableView.filter("EventDate", fromDate + " " + toDate, "Between");
}
}
function ToDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var FromPicker = $find('<%# ((GridItem)Container).FindControl("dateFrom").ClientID %>');
var fromDate = FormatSelectedDate(FromPicker);
var toDate = FormatSelectedDate(sender);
// filter alleen de tabel als we de andere datum al gekozen hebben
if (fromDate != '') {
tableView.filter("EventDate", fromDate + " " + toDate, "Between");
}
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();
var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat()
return formattedDate;
}
</script>
</telerik:RadScriptBlock>
Voilà! We kunnen onze grid nu filteren en tot nu toe niet echt grote problemen. Maar je zal zien dat de gekozen datums niet worden bewaard tussen de postbacks…
En dit is de reden waarom ik eigenlijk deze blogpost ben begonnnen. Ik vond niet direct de methode om de waardes tussen de postbacks te gaan bewaren…
Het is de bedoeling om aan de kalenders volgende code toe te voegen:
SelectedDate='<%# fromDate %>'
Allemaal goed en wel maar vanwaar komt deze variabele nu?! Ik vond het niet direct terug in de documentatie tot ik bij de demo’s van Telerik kwam.
Blijkbaar moet je in je code-behind twee properties gaan declareren die de waarde gaan bewaren in de ASP.NET ViewState.
Rustig rustig! De code komt er zo aan:
protected DateTime? fromDate {
set {
ViewState["fromDate"] = value;
}
get {
if ( ViewState["fromDate"] != null ) {
return ( DateTime )ViewState["fromDate"];
}
return null;
}
}
protected DateTime? toDate {
set {
ViewState["toDate"] = value;
}
get {
if ( ViewState["toDate"] != null ) {
return ( DateTime )ViewState["toDate"];
}
return null;
}
}
Ziezo! Nu blijven je gekozen waardes bewaard tussen de postbacks en is onze filter volledig!
