News

Add new post

HTML5 tag specs

Hi Guys !!!

My name is Elcio Abrahão and I m an University Teacher in São Paulo – Brazil.

I m using HTML5 to teach programing for my students the form did not change the output value when I add a field type “radio” to the “for” attribute. Is this a project specification or this is a bug ??

Important: I wish did not to use Javascript in other place except on the “oninput” attribute.

This is the test code:

<!DOCTYPE html>
<html>
<head>
<title>Regra de 3 Simples</title>
</head>
<body>
<h1>Cálculo Genérico de Regra de 3 Simples</h1><br/><br/>
<form name=”form1″ oninput=”if(document.form1.tipo1.checked==true){
x.value = parseFloat(v2.value)*parseFloat(v3.value)/parseFloat(v1.value)
}else{
x.value = parseFloat(v1.value)*parseFloat(v2.value)/parseFloat(v3.value)
}”>
<h2>Escolha tipo da regra de três simples</h2>
<input type=”radio” name=”tipo” id=”tipo1″ value=”1″>Diretamente Proporcional<br/><br/>
<input type=”radio” name=”tipo” id=”tipo2″ value=”2″>Inversamente Proporcional<br/><br/>
<br/><br/>
<table border=”1″>
<tr><th>Grandeza 1</th><th>Grandeza 2</th></tr>
<tr><td><input type=”number” id=”v1″ value=”0″ />
</td><td><input type=”number” id=”v2″ value=”0″ />
</td></tr><tr><td><input type=”number” id=”v3″ value=”0″ /></td>
<td><output name=”x” for=”v1 v2 v3 tipo”></output></tr>
</table>
</form>
</body>
</html>

I just tried to change the calculation when the user check other radio button. I tested on Firefox and Chrome but I must change some “number” type field to get the calculation changed…

Could you help me ?

Thanks  !!!

Best Regards,

Elcio Abrahão.

What to do with recurrent content among pages and posts

Hi all,

I have a question. On a website that I’m building every page has a content block with share buttons and a content block with email subscription placed below the real text.

What HTML elements should I use for this? It is now automatically inserted between the <main> elements, and I really wonder if it should be IN the main element, since those blocks of content are duplicate among all pages. But if it doesn’t belong IN the main element, what should I use in that case?

Can you help me with your opinions and knowledge?

Kind regards,

Willem

What’s the best reference for historical browser support/element compatibility of HTML specifications?

Specifically, I’m looking for browser versions that first gave basic support to HTML elements, in IE, Firefox, Opera, Chrome, and Safari.

The Mozilla Developer Network is a good resource; however, basic browser support of many elements in this resource are listed as ‘yes’ instead of the first known compatible browser versions. Example: The bottom ‘Browser compatibility’ table of the summary for the (Bold) element.

Other resources conflict on first supporting browser versions for various elements, and, don’t list references either. Example: Blooberry.com, an ancient (!) and popular resource, lists the B element as being first supported by IE in version 1. Aptana.com, however, lists IE 2.0 as its first version supporting .

Correct use of aside element

Hi all,

My name is Willem-Siebe and I hope I found the right place here to have some good discussions about the correct use of HTML5. I’m not sure if I should use one of the three mailinglists or write a post like I do now, please tell me for the next time ;-).

My problem: a typical website design can have a right-sidebar area. Can I use the <aside> element for this?

When I read about the <aside> element here: http://www.w3.org/html/wg/drafts/html/CR/sections.html#the-aside-element:

The element can be used for typographical effects like pull quotes or sidebars

On this page W3C discusses a typical website structure: http://www.w3.org/community/webed/wiki/HTML_structural_elements.

This example has two sidebars, one sidebar is wrapped in an <aside> element, with this explenation:

you may have noticed that we used an <aside> element to markup the 2nd sidebar: the one containing latest gigs and contact details. This is perfectly appropriate, as <aside> is for marking up pieces of information that are related to the main flow, but don’t fit in to it directly. And the main content in this case is all about the band!

Other good choices for an <aside> would be information about the author of the blog post(s), a band biography, or a band discography with links to buy their albums.

However, for the left-sidebar, they don’t use a <aside> element, with this explenation:

  • “sidebar1″ contains various useful links that will persist on every page of the site, such as “subscribe to RSS” and “Buy music from store”.

In the first explenation they explain: the main content in this case is all about the band!

Can anybody explain me why a RSS (about the band) and Buy Music link (from the band) are not related to the main content (all about the band!).

And when they talk about ‘main’ content, do I think of that on site-level (what is the site about) or really specific on page-level (what is the page about).

In my opinion it is normal use of a sidebar that is has elements, like navigation and advertisements, that will always be there. But when I have to take the above example serious, I can have a problem, because they explain not to use a <aside> element because: that will persist on every page..

Hope somebody would like to contribute to this problem.

Kind regards,

Willem-Siebe

Directionality in text fields

I did a project on numeracy for my IT degree in 2010.  There are two directionality attributes for text fields in HTML, left to right (ltr) and right to left (rtl).  Mathematical sums are processed from right to left.  It was my interpretation/understanding at the time that the rtl directional attribute behaved in the opposite way to that of ltr.   In the development of my project, I found that with the rtl directional attribute, the cursor had a default right alignment, but remained to the right of the last character entered.  This was as I subsequently learned was to preserve the way characters were read in the English language, from left to right.  This did not help me in any way with my project. When multiplying long numbers, after multiplying each column, I had to manually move the cursor to the left of the last (numerical) character entered.

It would have been useful at the time, and I still think it would be useful, to create a directionality attribute for mathematical processing.  With this attribute (call it ‘maths’ for example), the cursor in a text field would default aligned right, but move one character space to the left of the previously entered character.

When multiplying two numbers like 12345 and 77, as on paper, it would be useful to be able to create a vertical stack of text boxes, right aligned directly under each other.   This would I feel greatly enhance web-based learning of basic mathematics.

HTML5 tag proposal : sandbox

HTML has evolved beyond the original 22 tags; and so has evolved the web and the supporting infrastructure around consuming HTML. Things are getting even more interesting with content being published (and micro-published) and then embedded (videos, widgets, scripts) as content within content. The content within the content (or micro-content) is (a) infrastructure driven, like embedding of scriptlets for web tracking (b) consumption driven, like widgets for news, weather, jobs (c) interaction driven, like videos, slideshows, micro-documents, spreadsheet snapshots and (d) submissions like search forms, data-capture fields, etc.

Continue reading

A Propusal for A New Pseudo Element Called :icon

Take a look to this HTML5 code as shown here:

<menu type="toolbar">
	<command type="radio" radiogroup="alignment" checked="checked"
		label="Left" icon="icons/alL.png" onclick="setAlign('left')">
	<command type="radio" radiogroup="alignment"
		label="Center" icon="icons/alC.png" onclick="setAlign('center')">
	<command type="radio" radiogroup="alignment"
		label="Right" icon="icons/alR.png" onclick="setAlign('right')">
<hr>
	<command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>

The question is: Isn’t icon="" attribute here a presentation attribute?
You might say yes, and it should be set using CSS like this:

command.align-right{icon: '....'}

However, this presentation attribute in turn needs presentation attributes! (position, padding…).

So, we need something in between: A Pseudo Element.
A Pseudo Element is simply an attribute has attributes.

<command class="page-about"...></command>
<command class="domain-settings"...></command>

.page-about:icon {
	content: char(ℹ);
	font: 10pt RichStyle;
	icon-position: top;
}

.domain-settings:icon {
	content: char(⚙);
	font: 10pt RichStyle;
	icon-position: top;
}

Thus, icon="" as an HTML attribute for <command> should be deprecated.

The Shameless Plug Tag

Particularly with the rise in self promotional activities around Social Networks there is a need for a self promotional meta tag – distinct from factual content descriptive meta tags.

<meta name=”shameless” content=”Insert Shameless Plug Here”</>

<shameless>Insert Shameless Plug Here</shameless>