HTML Learning Tools from Mozilla

The Mozilla Foundation has setup its Webmaker site to help folks learn how to code HTML.

The site includes:

• Thimble is an online HTML editor you can use to create web pages. It is a simple split pane with your HTML code on the left and the resulting output on the right. You can publish the page to the Webmaker site so it can share it with others. The site includes a number of projects designed to get your started learning.


• X-Ray Goggles is a tool for exploring the code on a web page.


• Popcorn is a tool for creating Video

All the tools are online which is pretty cool. The site could use a starter video or project that gets really basic. From my experience, you can't just throw tags at folks and expect them to "get it". But I would definitely give the Mozilla Foundation and A for effort.



The Register has a detailed review here.

Coda and Diet Coda on Sale Today Only (5/25)

Are you a fan of HTML, CSS, Javascript, and PHP development on the Mac? If so then you are probably a fan of Coda, which is a Web Site development tool for OS X made by Panic Software.



New Version 2

Well the new version 2, is out this week. Panic is offering Coda at 50% off this week only for early purchasers Today, Friday 5/25, is the last day of the deal so if you are interested, head to the Mac app store and get code for $49.



Coda 2





Diet Coda

In addition to Coda 2, Panic is releasing a programming editor for the iPad called Diet Coda. I have always found the idea of programming on iPad type devices intriguing. So for $9.99, definitely give this app a look. It looks like it might make the whole coding thing work on a pad.



Diet Coda for the iPad.

Great Cross Platform Programmer's Editor

I am always looking for good tools. When I just need a text editor, I typically use JEdit. It is free, open source, and since it is written in Java, works well on Mac, Linux or Windows. However, JEdit is not always the simplest tool to configure and use.



Recently I ran across Sublime Text. For $60, you get a really nice editor, with an easy to use interface. Plus, the editor is skinnable so you have a number of options on how the editor and your code actually look. It has nice code completion features with customization options. Top that off with the fact it runs on Windows, Mac OS X, Linux. It is definitely worth a look.

W3C Creates a Logo for HTML 5

From Mashable, the WC3 has created a logo program for HTML 5. Anyone can use the logo to highlight HTML 5 development or features. In addition, they have stickers and t-shirts. I'll be using the logos for HTML stories I find and content I create.



Want the logo? Get it for yourself here.

Detecting Browsers with PHP

Been looking for a way to detect a browser in PHP. Blogger has added a feature to automatically deliver a mobile web version of my blog. However, this doesn't seem to work well with my frameset setup on blueskyworkshop.com. Plus blogger doesn't include any of my navigation features or ads on the mobile version. So I want to roll my own.



So here are a couple links on browser detection.

• Sample code on the drupal site.


• A browser detection object by Chris Schuld.

Mozilla Browser Interface Design with HTML and CSS?

The Mozilla org is experimenting with defining the browser user interface with HTML, CSS and JavaScript. Technologizer has the story with links here.



This could be really cool stuff. This would provide quite a bit of flexibility in the interface.

Developing for Google Blogger

I am looking into developing my own template for Google's blogger tool. So looking around I found a couple of resources of interest.

• Widgets - If you want to make widgets you can find the scoop here. You can do a lot more than that if you have an interest. The documentation is all on the site.


• Blog Templates - Base templates and documentation is on this Google group. The details are in the Pages section.

HTML 5 Book

Mark Pilgrims book is about to come out in print. You can buy the electronic version right now on the O'Reilly Web site. I picked it up over the weekend and look forward to reading it.

JQuery: Handling Combo/Select Box Events

While creating a Namespace example yesterday, I needed the code to actually do something to provide a good example. So, the code created an example of how to manipulate an HTML combo/select box using JQuery. The key is to use the change event on the combo box to execute the code needed to update the list.



$('#ListSelect').change(Blue.gen.comboSelect);



Check out the example's source code for the details.

HTML5 Features You Should use Right Now

The folks at NetTuts created a video on HTML5 features you can use right now.  I would like to focus on 4 of them.



HTML DocType

Instead of including a long link to a DTD in each of your HTML documents, you can simple replace it with:

<!DOCTYPE html>

Character Set

You can define a character set much more simply.

<meta charset="utf-8"/>

No More Type Attributes

You are no longer required to add type attributes to the <style> or <script> tags. For example:

<script>
  // your code here
</script>

or

<style>
  p{ margin:0; }
</style>

I plan to test this a bit myself, but according to the author, Google is already using the DocType setting.

CSS: Center an Image with CSS

I have created a short write up on how to center an image using CSS. Two methods are covered, using a div and defining rules for the img tag directly. Enjoy!

Great Media Developer Available (Limited Time Offer!)

I have been meaning to post this for a few weeks. One on my friends and coworkers, Dwayne Wolff, did not make the transition from Sun Microsystems to Oracle. He is the best Flash/Audio/Video/Illustrator/Artist/Media guy I have every worked with. He can take anybody's stick figure drawing and turn them into something cool. He is currently available and would be a great pick up for anyone needing a great artist/media guy.



For more information, check out these links.

http://www.dwaynewolff.com/staging - Media samples galore here.



http://www.linkedin.com/in/dwaynewolff - Resume and such



Better move quick, cause I don't think he will be on the market for long.

iPad == Flash is Dead?

There has been an interesting Meme developing on the Net this week with the release of the iPad. The iPad, like the iPhone, does not support Flash. So many folks are wondering why not, and what does this mean?



Gina over at Lifehacker and Smarterware has notice a big increase in browsers that don't support Flash.  This seems to make sense given the rise of Smart phones and such in our daily lives.



So who is the hitman gunning for Flash? HTML 5 apparently. This post, written by Bex Huff a few months ago, is a good summary of how HTML 5 could do the deed. With HTML 5 having built in support for audio, video, and vector graphics, it can do all that Flash can do now. And given it is an open standard, there would be a lot of opportunity to develop authoring tools like Adobe's.



So why won't Apple put Flash on its mobile OS?  Well the main reason is Steve Job's doesn't like it. According to Wired's Epicenter blog, a day or two after the iPad announcement, Apple had a company meeting to celebrate the launch. As is normal at these events, the CEO takes questions of employees. Here are some of his comments about Adobe paraphrased.

They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don�t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it�s because of Flash. No one will be using Flash, he says. The world is moving to HTML 5.

That seems to be a pretty strong endorsement of HTML 5 from Mr Jobs. In addition, according to the FanBoy blog, Adobe will not make the effort to build a bridge between the two companies.



So, don't expect to see Flash on the iPad or iPhone. With Google and Vimeo announcing support for HTML 5 video, Apple may not need flash.

CSS Right Aligned Form Labels

I have added a quick write up on how to create a HTML form with right aligned labels. Pretty simple to do really, but I wanted a reference example for my own benefit.

HTML 5 Video Should be Open

There is a battle brewing over which video format should be used in HTML 5. CNet has the details here.



Ogg Theora definitely seems like the way to go. Open standards deserve open and royalty free tools like Ogg Theora.

HTML Color Codes

I wish I had found this site a lot sooner. The HTML Color Code and Names page on computerhope.com has a listing of all the Hex codes and names for colors in HTML. In addtion, samples of each are included. Very helpful for you CSS adventures.

Built in Color Picker for Mac

Yesterday I ran across a tool built into OS X that can give you the RGB values for just about anything on a web page. This is very useful for "borrowing" color ideas from other sites.

In the Utilities folder, just launch DigitalColor Meter. Your mouse becomes a color browser. Simply mouse over the image, background, or other visual element and behold, the color value is displayed for you. There are a number of formats to choose from. Since I do a lot of HTML work, the 8-bit HEX is my personal favorite.

If anyone else knows of similar tools for Windows or Linux, please post a comment. Because being able to do this is freaking great!

CSS Shorthand for Margins and Padding

I have been trying to incorporate some of the 10 CSS tips I posted about a few days back. When it comes to using shorthand for margins and padding I always get confused. I know you can put in 4 values in one margin statement, but I can never remember what order the 4 values are in.

So to help myself out, I wrote up a page on CSS Shorthand Properties.

So to summarize, when you are defining a margin with 4 values, CSS starts at the top of the box and then moves clockwise around the box. So for example:

h2{ margin: 5px 20px 5px 30px; }

This rule defines a top margin of 5px, a right margin of 20px a bottom margin of 5px, and a left margin of 30px. Start at the top, and move clockwise: top, right, bottom, left. Easy! :)

For more information and examples just click on the link.

How To Use DOCTYPEs

A follow up to my last post. A List Apart has this post on using DOCTYPE processing instruction in your HTML files. A listing of all the various types you should use is included. Very helpful.

Adding a View Source Link to a Page

I'm creating some JQuery examples and I wanted to add a view source link to each HTML page. After a little Googling I found this article on how to do it. But this just loads the page into the current window. I think it would be better if it popped up into a new windows.

Here is the code I created to view the source in a new window.

   1:<a href="javascript:void(window.open('view-source:'+document.location,
   2:'_blank'))">View Source</a>