February 11, 2012
February 2012 Meeting Announcement -- HTML5 - What Happened to the "X"?
In December, before the snow hit, we looked at browser behavior to see how the new HTML5
structural tags can be made to work in legacy browsers. This month, we
will work on more aspects of this new standard and see how it will make
the job of a web developer simpler. In the process, we will consider
whatever happened to XHTML.
January 20, 2012
January meeting cancelled
The PACS meeting scheduled for January 21, 2012, is cancelled due to the severe weather forecast.
January 16, 2012
January 2012 Meeting Announcement -- HTML5 - What Happened to the "X"?
Last month, we looked at browser behavior to see how the new HTML5 structural tags can be made to work in legacy browsers. This month, we will work on more aspects of this new standard and see how it will make the job of a web developer simpler. In the process, we will consider whatever happened to XHTML.
December 29, 2011
December 2011 Meeting Report
At our December meeting, we considered how to use HTML5 elements across browsers, even old ones. It turns out that there are two tricks that make that possible.
HTML5's structural elements (article, aside, footer, etc.) are block-level elements that let you define and style areas of a page without using div's and such. The obvious requirement is to make sure that the browser renders the elements as block-level. Modern browsers appear to treat these new elements properly, but we can make sure that all browsers do so. We use the fact that a browser is generally able to style tags even if it does not recognize the tags themselves. So we simply style our unknown tags to display as blocks, the browser complies, and we have our block-level elements. The easiest way to make sure this happens is to add a reset right into your style sheet.
A couple of examples:
Eric Meyer:
We downloaded and played with the actual script itself and found that it even works with a completely fictional tag called <pacs>.
HTML5's structural elements (article, aside, footer, etc.) are block-level elements that let you define and style areas of a page without using div's and such. The obvious requirement is to make sure that the browser renders the elements as block-level. Modern browsers appear to treat these new elements properly, but we can make sure that all browsers do so. We use the fact that a browser is generally able to style tags even if it does not recognize the tags themselves. So we simply style our unknown tags to display as blocks, the browser complies, and we have our block-level elements. The easiest way to make sure this happens is to add a reset right into your style sheet.
A couple of examples:
Eric Meyer:
/* HTML5 display-role reset for older browsers */HTML5Doctor.com:
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
article,aside,details,figcaption,figure,These resets, however, do not work with Internet Explorer before version 9, because earlier versions of IE do not style unknown tags. Solving that requires a second trick -- using a script called "the HTML5 shiv." This javascript can be called by simply adding this statement to the head of your page:
footer,header,hgroup,menu,nav,section {
display:block;
}
<!--[if lt IE 9]>The shiv creates elements in the DOM that do not otherwise exist. The reset will then take those created elements and style them as blocks.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
?</script>
<![endif] -->
We downloaded and played with the actual script itself and found that it even works with a completely fictional tag called <pacs>.
December 11, 2011
December 2011 Meeting Announcement -- New Web, Old Browsers
The next meeting of the PACS CSS Workshop will be Saturday, December 17, at our usual 9-10 hour. Our topic this month is New Web, Old Browsers.
We saw last month that there are new tags in HTML5 that let us lay out a page with native tags instead of div's. We also saw that the process breaks down in IE8. This month, we will look at browser behavior and see how these new tags can be made to work in legacy browsers. HTML5 is not an official standard yet, but we will see that we can use these tags now and with confidence.
In the process, we will reveal publicly for the first time a new, never before seen HTML tag.
We will also have a giveaway book, courtesy of the Windows SIG. PACS membership is required, and this time, you will also have to answer a quiz to win.
We saw last month that there are new tags in HTML5 that let us lay out a page with native tags instead of div's. We also saw that the process breaks down in IE8. This month, we will look at browser behavior and see how these new tags can be made to work in legacy browsers. HTML5 is not an official standard yet, but we will see that we can use these tags now and with confidence.
In the process, we will reveal publicly for the first time a new, never before seen HTML tag.
We will also have a giveaway book, courtesy of the Windows SIG. PACS membership is required, and this time, you will also have to answer a quiz to win.
November 20, 2011
November 2011 Meeting Report
At the November meeting, we covered the new structural elements in HTML5. There are five of them, and we compared two versions of the same three-column page to see how these new tags compare to the div's that we are used to using for things like headers and footers. The new tags are listed in this article from IBM where their use on a blog page is demonstrated.
Some other places to read about HTML5 are below.
We will continue next month on how to use HTML5's structural semantics across browsers.
Some other places to read about HTML5 are below.
We will continue next month on how to use HTML5's structural semantics across browsers.
November 15, 2011
November 2011 Meeting Announcement -- New Web, New Foundation
The next meeting of the PACS CSS Workshop will be Saturday, November 19, at our usual 9-10 hour.
Our topic this month is New Web - New Foundation. We will be looking at new tags introduced in HTML5 to define the structure of a webpage. They will make styling easier and cut down on "div-itis." But will they work across browsers? We'll see.
Be sure to check the PACS website for the full schedule of sessions this month. Google+, website analytics, and WordPress are features at three of our web-related SIG's.
Our topic this month is New Web - New Foundation. We will be looking at new tags introduced in HTML5 to define the structure of a webpage. They will make styling easier and cut down on "div-itis." But will they work across browsers? We'll see.
Be sure to check the PACS website for the full schedule of sessions this month. Google+, website analytics, and WordPress are features at three of our web-related SIG's.
October 16, 2011
October 2011 Meeting Report
At the October meeting of the PACS CSS Workshop, we started looking closely at the new elements for web development that are now coming into play.
We started with a demo page of a display of the planets, and noted that it did not work in Internet Explorer. We then worked with the demo page from SitePoint that accompanies their book on HTML5 and CSS3. Among the interesting items are the new video tag, drag and drop interactivity, geolocation, columns for text, and CSS3 animations.
Next month we will get more basic and look at the new HTML5 structural tags that we can use now.
We started with a demo page of a display of the planets, and noted that it did not work in Internet Explorer. We then worked with the demo page from SitePoint that accompanies their book on HTML5 and CSS3. Among the interesting items are the new video tag, drag and drop interactivity, geolocation, columns for text, and CSS3 animations.
Next month we will get more basic and look at the new HTML5 structural tags that we can use now.
October 10, 2011
October 2011 Meeting Announcement -- New Web, New Tags
The next meeting of the PACS CSS Workshop will be Saturday, October 15, at our usual 9-10 hour.
Last month we introduced this season's topic -- HTML5 and CSS3. That may sound like two topics, but they are intertwined enough that we will be going back and forth between them, looking at the two as a combined set of technologies.
In September, we saw some examples of HTML5 already in use. This month, we will look at specific examples of the new HTML tags and CSS styles that are available. Time permitting, we will start on how to put these new options into effect now, even as they are still being developed by the standards-making bodies.
The rest of the day at PACS will be busy as well. Check the website for the schedule of web-related groups. Make a special note that Frank Stepanski will be returning this month to demo Drupal at the Web Design SIG meeting.
See you Saturday.
Last month we introduced this season's topic -- HTML5 and CSS3. That may sound like two topics, but they are intertwined enough that we will be going back and forth between them, looking at the two as a combined set of technologies.
In September, we saw some examples of HTML5 already in use. This month, we will look at specific examples of the new HTML tags and CSS styles that are available. Time permitting, we will start on how to put these new options into effect now, even as they are still being developed by the standards-making bodies.
The rest of the day at PACS will be busy as well. Check the website for the schedule of web-related groups. Make a special note that Frank Stepanski will be returning this month to demo Drupal at the Web Design SIG meeting.
See you Saturday.
September 18, 2011
September 2011 Meeting Report
At the September meeting of the PACS CSS Workshop, we started on our topic for this season, The New Web. We did an initial overview of the technologies that are going to change the way we make websites -- HTML5, CSS3, and the new browser API's which open up the creation of web apps. We looked at some examples such as Google's offline apps and Netflix's new user interface.
The book I have been using to prepare for these sessions is HTML5 & CSS3 for the Real World from Sitepoint. You can download sample chapters from their website. They have a demo page with examples of the new technologies that are discussed in the book. We looked at that page briefly in September, and we will be referring back to it in future meetings as a good reference point. Open that demo in different browsers to get an idea of the various levels of support that are out there now.
The book I have been using to prepare for these sessions is HTML5 & CSS3 for the Real World from Sitepoint. You can download sample chapters from their website. They have a demo page with examples of the new technologies that are discussed in the book. We looked at that page briefly in September, and we will be referring back to it in future meetings as a good reference point. Open that demo in different browsers to get an idea of the various levels of support that are out there now.
Subscribe to:
Posts (Atom)