HTML

You are currently browsing articles tagged HTML.

For the past year or so, companies that use the internet for sales, products, or services are aglow with conversations of HTML5 and CSS3 and how it will save the world! Well, it will certainly help your browsing experience be more useful and be a little less work for coders, but it takes content to save the world.

HTML5 is still going through standardization as there are so many browsers and devices, the W3C (World Wide Web Consortium – the group who helps make standard for the internet) is still tweaking HTML5 definitions. For now, HTML4 remains the current standard of internet pages, standardized in 1997. HTML5 has been in the works since 2004, and the W3C hopes to have it released in 2012. There is a lot to this to be sure!

The goal for HTML5 is to pull current web technologies into one standard, including HTML4, XHTML1 (HTML with XML), DOM2HTML (document object model HTML), and some JavaScript. Just don’t forget that most users don’t have HTML5-ready browsers, so there is a very good chance that you’ll have to make your content work for both (doubling your work) if HTML5 is what you want.

First, let’s look at some of the key benefits of HTML5 compared to HTML4. Since most of the inner-workings of HTML code is just Greek to most folks, we won’t delve into the specifics of each of the new elements added to HTML5, but here is the list some of them:

article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, and wbr

If you have ever worked with a blog such as WordPress or Blogger, you may recognize some of the page elements above that you are familiar with.

Of all the new elements that are listed above, some of the most talked about are these:

  • article – an independent piece of content in a document
  • audio and video are less dependent, sometimes not dependent, on plug-ins to play multi-media content in HTML5
  • canvas – probably one of the most talked-about element in HTML5, it is used to render dynamic bitmap graphics on the fly in graphs or games through the use of JavaScript and other dynamic content tools
  • footer, header, and nav – all the regions of a page typically coded in most sites, but especially in blog sites

There are also many new APIs for HTML5 that were not part of HTML4 making using, playing, watching, and interacting with web content a little easier for web servers, computers, and users alike.

Many new mobile devices such as the Apple iPad are using HTML5, as are other desktop browsers, but none fully utilize HTML5 – yet. Currently the top contenders for the use of HTML5 according to HTML 5 Test website are the following (scores indicated out of a possible of 400 points each):

  1. Google Chrome v10.0.648 – 288 points
  2. Opera v11.10 – 258 points
  3. Mozilla Firefox v4.0 – 255 points
  4. Apple Safari v5.0.3 – 228 points
  5. Microsoft Internet Explorer v9 – 130 points

Browsers are working hard to adopt these new standards, and often standards change as challenges for global implementation arise.

While HTML5 offers some great ways to use JavaScript and built-in processes to provide content a bit faster and with less reliance on plug-ins and add-ons, the changes to CSS3 are substantial too! While changes to how a page displays has been controlled by CSS (cascading style sheets) for over a decade, the slow adoption in consistent support of CSS styles has made it tough on users and developers alike.

While you have been able to add rounded corners, drop-shadows, and gradients to pages with CSS for some time, some of the most prominent browsers (cough, cough, IE) have not provided support for many ‘standard’ CSS rules. So developers often have to write separate style rules for specific browsers. Been there, done that, don’t want more of it!

In addition to rounded corners on an HTML page, CSS can now rotate content, it can change the opacity of a page element with RGBA (RGB for colors: RED, GREEN, and BLUE, and A for “alpha” or transparency). So you don’t have to use a semi-opaque PNG file to fill a DIV, but you can just say ‘make this DIV 50% transparent’. SO much easier!

Below is a screen capture from CSS3PIE. They offer tools to allow Internet Explorer to support standards-based applications of CSS. Normally getting IE to render CSS consistent with other browsers is a wash.

The sample below shows some cool CSS3 style examples you might like using on your own site! Note the redundancies in the CSS code below the sample. You’ll see how browsers ‘see’ the styles are NOT the same (click image for a larger view)…

CSS3 Sample Pie Tool Example

  • BORDER-RADIUS: is the new CSS3 definition for HTML5 documents to display rounded corners on DIVs.
  • WEBKIT-BORDER-RADIUS: is now Apple’s Safari browser and Google Chrome recognize rounded corners.
  • MOZ-BORDER-RADIUS: tells Mozilla and Gecko how to display rounded corners

So as you see, making all browsers play the same game with HTML and CSS styles could really improve our lives, both in time saved making pages online, and time reduced viewing content. But it may not save the world…

Tags: , , , , , , , , , ,

One of the most painful inabilities to the Apple iPhone, is the lack of Adobe Flash support online.

As a Flash developer and animator, this has really been a personal peeve. I read recently that some are convinced that Apple is trying to push out Adobe! That bothers me more. No other industry has lent to the success of Apple more than we creatives in agencies, studios, and production houses around the globe.

When everyone was jumping on the PC/Windows bandwagon for so many years (which most still do), it was the companies who did print collateral, desktop production, illustration, graphic design, and television/movie production who were Apple through and through.

Now that the rest of the planet is now keen to what the Apple computer is good for (most everything including avoiding viruses), we see an ally turn against the very core of our business: Adobe and its Creative Suite of products.

While the conflict may be limited to Flash Shockwave files specifically, the entire suite suffers for the fact that the iPhone and iPad will not allow SWF files to work on their Safari browser! And rumor has it that Adobe may take this to the court system.

I’m no dummy! I know that a lot of abuse of Flash files online has been wrought by banner ads bouncing, moving, re-sizing on pages. As a web developer, I understand that user overload of Flash ads can occur. But looking at how efficient they are, and how clear they look, how smoothly they behave, it is hard to not like them. No one likes a slow-loading page, and Flash made ads and websites run more efficiently. A lot of talk about Web 2.0 is in regard to AJAX. AJAX is just a mix of JavaScript, HTML, Flash, and XML. Take Flash out of that and the very power and quality of modern web usage is hindered.

Use a computer, and the world is normal. Even use most mobile devices with web access, and Flash is fine. But take the trendy and popular Apple iPhone/iPad and try to see anything with a Flash backbone, and you might be looking at nothing.

When so much is dependent on Flash these days for efficiency, and quality, I am stunned that Apple has not incorporated Flash at the launch of either product. Odd, it seems that the iPhone’s own function is built on very similar technology as Flash and SWF files. Have they adopted the benefits and then put a big X on Flash because they didn’t make it different enough to protect the system software? I wonder….

Meanwhile, something that brings life to the web, and makes getting information and entertainment easy, and is very efficient (usually) is being blocked by my career-long partner: Apple. STOP IT!

Got gripes about iProducts vs. Flash too? The comment line is open!

Tags: , , , , , , , ,

« Older entries