HTML « 100% Fresh Blog

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

Guide to web workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

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

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

!DOCTYPE – simplified, shortened
a – used for hyperlinks ONLY, name is no longer valid attribute, must have href.
address – new rule when address is in article tag
b – stylistically offset
em – stress emphasis
hr – paragraph-level thematic break
i – alternate voice
legend – legend can now be used with figure tag and details tag in addition to fieldset tag
menu – list form controls, no longer deprecated
small – side comments and small print
strong – strong importance

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

Posted in $5.00 Fridays, C2, HTML, Standards-Based Web Design, Web design for print designers made easy | No Comments »

HTML5 Resources

Tuesday, July 20th, 2010

I was lucky enough to be invited to lead a discussion of HTML5 with the Madison Web Design & Dev Meetup group Monday night. Instead of the standard Keynote/PowerPoint presentation, I decided that because the topic was so intimately web related I’d go with a live demo of actual web pages, projects and resources related to the new features of the HTML5 language, focusing, where possible, on features we can use right now. The “live demo” nature gave the group plenty of opportunities ask questions, make comments and offer up their experiences with HTML5.

The Madison Web Design & Dev Meetup is a great group of web professionals of all skill levels and a fantastic resource for the Madison web community. If you’re very experienced you’ll find peers you can discuss the most advanced development topics with and anyone just dipping their toes into web design can get real world answers they’ll understand from working professionals in the field.

You can find all their contact info here:

http://www.meetup.com/madisonwebmeetup/

If you’re interested in learning more about HTML5 (and CSS3 and Javascript) here is a list of the sites visited/discussed during my presentation.

A very short history of the web – from basic text to the equivalent of the printed page

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961017235908/http://www2.yahoo.com/

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/206/206.css&page=0

Examples of HTML5, CSS3 and Javascript – applications in the browser window

http://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

http://www.findmebyip.com/litmus/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5demos.com/

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

http://www.fontsquirrel.com/fontface/generator

Exercise showing the new HTML5 semantic tags in use

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

New HTML5 Attributes

http://www.w3schools.com/html5/html5_ref_standardattributes.asp

New HTML5 Events

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

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

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

Posted in C2, Dreamweaver, Events, HTML, Standards-Based Web Design | 2 Comments »

Some thoughts on HTML5 from James Conway

Thursday, February 18th, 2010

The Question I’m getting: Is it time start using HTML5?

The Answer I’m giving: It depends.

(and that answer doesn’t get a lot of applause)

HTML5 is the next (proposed) version of the underlying language of the web, bringing with it some great features like plug-in-less video and audio, a pixel-based drawing and animating canvas, local storage of data, and additional semantic tags that more accurately reflect the kind of content web developers create on a daily basis.

HTML5 will (along with the improvements in Javascript, Javascript libraries, CSS3 and SVG) allow web developers to create powerful online web applications in addition to more capable web pages.

HTML5 is coming to a browser near you soon. As a matter of fact, depending on which browser you’re using, you may already have an almost full complement of HTML5 capabilities. And there’s the rub: standards-based web development requires that our content accommodate the least capable of browsers – we don’t lock people out from our content because of their choice of browsers. Which means we generally don’t use a new web technology until all common browsers can use it.

So if you’re asking “should I start coding all my sites in HTML5 today?” – the answer is “of course not.”

If you’re asking “can I start enhancing my sites with strategically-used parts of HTML5 using progressive enhancement techniques that allow modern browsers to enjoy the full experience while still providing essential information to everyone?” – then I say go for it, there are wonderful things to be built with this new technology.

For a great overview of what parts of HTML5 are currently supported by each major browser go to http://a.deveria.com/caniuse/

Posted in C2, HTML | 1 Comment »

Future of Web, Interactive, and Motion Graphics: Eisner Museum Talk

Monday, February 8th, 2010

On Wednesday, four panelists spoke at the The Eisner American Museum of Advertising & Design about the broad topics of Web, Interactive and Motion Graphics. I was lucky enough to be one of the participating panelists and it was an exciting opportunity to talk with people in the community about the options, future, and general information concerning these areas of the creative world.

We had a good turnout of about 50 people. Most of the attendees were students at MIAD and MATC, not surprising since the event was part of the College Lecture Series, but there were also some professionals from the community there.

It was an interesting time as the four panelists had a great variety of experiences and focus that they brought to the discussion. The panelists were Micah Eberman of Fullhouse Interactive, Jason Evans of GS Design, Nick Waraska of Blend Studios, and me (Alexander Lucas of C2 Graphics and Stamm Media). The experiences touted included: high-end broadcast motion graphics, interactive websites, iPhone apps, trade show displays, and flash applications.

The panel agreed for the most part on the prepared questions concerning whether you need to continue to educate yourself, where to find the sites, and the importance of knowing broad skills but also specializing in a specific skill.

One topic brought up at the panel, of no great surprise, was the question of the future with the iPad and other tablet computers. There was again mostly consensus on this issue that while the iPad does not support Flash that it would not be an instant Flash killer and that it will take a long lumbering time for the internet to fully embrace HTML 5.

The two biggest questions which split the panel, however, concerned the role of social media and the future of the web/interactive/motion graphics space. Some of the panelists saw social media as being of the most importance and something that is the wave of future revenue and expression, while others admitting not really having a firm grip on where to proceed in this realm and what to do with it.

The only main consensus in the future debate: a sense of uncertainty of exactly what will happen. But that is what makes the future so interesting. We can still be surprised and be creative with emerging technologies.

Posted in Adobe, After Effects, Apple, C2, Events, Flash, HTML, professional development, social media | No Comments »

New classes! Coming this fall…

Monday, August 3rd, 2009

Is everyone ready for some new classes from C2? Here is a sneak preview of some of the new classes we will be introducing this fall.

The JavaScript family:

Interactivity for Designers 1 – No programming knowledge required. This class introduces designers with a knowledge of both CSS and HTML to several pre-build JavaScript projects that can be implemented with virtually no programming. Lightboxes, slideshows, tooltips, simple form validation are all covered in this 4-hour class. This class is an excellent introduction to interactive concepts for designers wary of programming.

Interactivity for Designers 2 – No programming knowledge required but Interactivity for Designers 1 is recommended. This 4-hour class shows designers with HTML & CSS knowledge how to configure and modify pre-built JavaScript projects without having to dive deep into JavaScript programming. This class is an excellent introduction to interactive concepts for designers wary of programming.

Introduction to jQuery – Most professional web developers don’t feel like re-inventing the wheel, so over the last 5 years the use of JavaScript libraries for web page interactivity has skyrocketed and jQuery is one of the most popular libraries available. This 6-hour class introduces the web developer with a solid understanding of HTML & CSS to the programming concept necessary to start building highly interactive web pages using jQuery.

The Flex/ActionScript family:

Introduction to Adobe Flex – This 6-hour class is an introduction to Adobe’s Flex framework for anyone interested in creating and deploying highly interactive web applications.

Creating Adobe AIR projects – Adobe’s AIR technology allows designers & developers to create multi-platform standalone applications using a variety of technologies underneath the skin.

Introduction to Adobe Catalyst – Adobe’s new development environment aimed at designers – use the tools you already know and love (Photoshop & Illustrator) to create functional, dynamic user interfaces that can stand alone or can be handed-off to a developer for advanced functionality.

Just a sampling of some of the things we’ll be unveiling soon. Let us know what you think!

Posted in Adobe Authorized Training Center, C2, CSS, Flash, Flex, HTML, Illustrator, Photoshop, Training | No Comments »

SEO – Ethics and Traffic

Friday, June 5th, 2009

As a web designer there are a few things that go without saying:

Make code neat
Make site accessible
Deliver content

But there is a whole world of strategy and techniques that go far beyond the simply placing of tags and aligning divs. There is the murky realm of beating out the competition and using the acronym – SEO.

Symbolic Erratic Origin?
Semantic Emphasis Object?

Search Engine Optimization. I know some of you are yawning and looking to see if there is a better article further down the page. The fact is that SEO is big business. There are thousands of companies that do SEO consultation as their primary business.

But why the fuss? Well how do most people find a website? Either direct knowledge of the website (in which case you don’t need to worry about anything but content) or through using a search engine, primarily Google and now, more and more, Bing.

The secrets to scoring well on a search engine are not exactly well kept but the implementation of these tips to the extreme makes the web experience much less enjoyable. The main goals of SEO are to cluster keywords, make pages spider friendly, and get as many top 10 results as possible. Think about it. When was the last time you went to page 2 of Google results?

The issue becomes one of ethics more when you start talking about individual landing pages and rewriting content, not merely for clarity, but for search engine score. It used to be that people would meta keyword stuff or make invisible text the same color as the background. Search engines grew wise. Now it is more about content stuffing and multiple page creation.

The idea behind design (and usually good writing) is to communicate clearly and efficiently (read:brief). Good SEO work means having the same keyword 4 or 5 times in the same body text. How many times can you put in “Milwaukee’s Best Enchilada” in the same body text?

The truth is that eventually the cream floats to the top, so that if you are really good, no matter how much SEO your competitor does or how little you do the most linked to and visited sites will climb to the top. But if there is no true forerunner, SEO may make the difference between a top 10 listing and a top result – which can mean thousands of clicks.

Posted in HTML | No Comments »

Why can’t I just learn Dreamweaver?

Tuesday, March 3rd, 2009

Let’s talk about web design for a minute.

In the print world, if you know how to use InDesign or Quark you essentially know how to create any document or page (with a couple caveats based on background knowledge like: placed images need the proper resolution, no accidental spot or RGB colors, etc). What you see is what you get.

Web design is different in that just knowing the Dreamweaver program does not allow you to make proper web pages. Or maybe a better way to put it is that there is much more required background knowledge before you will be able to build a professional, useful, successful web page. With that knowledge, Dreamweaver is a great tool for building websites but that background knowledge needs to come first.

What do you need to know before Dreamweaver is useful?

1 – You need to learn the rules for saving images for the web. Easy.

2 – HTML is how you get “stuff” on the page. You need to learn HTML and semantic markup (a fancy way of saying “tag things by their meaning, not their look”). It sounds like programming but it’s really not, it’s typing. You have to learn about 10 basic tags for HTML and then you’re up and running. You can get a working knowledge of HTML in a couple hours. Fairly easy to learn.

3 – You need to learn CSS (Cascading Style Sheets). This is, admittedly, the difficult part of web design. Everything you think of as “Design” is CSS on the web – from font control to page layout. CSS has to be created by hand by typing text to create a set of rules – you can’t use a tool like the frame tool InDesign to draw a box. This isn’t as difficult as it may sound – you only use about 20 CSS properties on a regular basis so that’s another 20 words to understand. But yes, CSS takes a while to learn because it’s really more about judgement and problem solving than learning some “code words”. And that’s why when people ask me “Why isn’t there a program where I put stuff where I want it then makes a web page for me?” I have to tell them there isn’t a program like that because the act of laying out a web page involves creativity, judgement and problem solving and no program can do that for us (yet).

Acceptance that web design is not done the same way as print design is the first step.

We have 3 web related classes:

In our Standards-Based Web Design class we use Dreamweaver as we learn the 3 topics above and we create websites at the highest level of professionalism – what’s known as “Standards Based web design” – This class has my strongest recommendation.

We do have a Dreamweaver specific class that teaches all the “parts” of Dreamweaver but it is for people who are part of a team that already uses Dreamweaver and that person is not responsible for creating pages but maybe updating them or doing a couple specific things using Dreamweaver. Recommended only for special cases.

We also have a class dedicated to Creating HTML Email - even though they may look the same, the rules are completely different for web pages and email HTML pages. This class uses a very specific subset of Dreamweaver’s tools along with Photoshop.

Posted in C2, Dreamweaver, HTML, Standards-Based Web Design | 1 Comment »

C2′s Standards-based Web Design Training

Thursday, June 5th, 2008

Standards-based web design is a process that uses open standards (like HTML and CSS) to create web sites that are fast-loading, clean, accessible to everyone, backwards and forwards compatible, search engine friendly, beautiful and purposeful.

C2′s Standards-based Web Design class is for designers (or anyone) serious about creating professional web sites that adhere to these principles. The techniques taught in this class are used to create the most popular and well-designed sites on the web. Standards-based web design focuses on the process of implementing a design in the most efficient, accessible method possible, using a set of standardized techniques without needing complex programming language knowledge (all you really need is a text editor to create pages). Using C2′s best-practice driven curriculum, this class provides all the skills necessary to create an entire web site including:

planning & information architecture

hand-coding HTML & CSS

design and layout techniques

typographic control

image preparation

navigation systems

interactive behaviors

search engine optimization

accessibility, usability and compatibility

email HTML

site testing, optimization,validation and management

Posted in CSS, HTML, Standards-Based Web Design | 2 Comments »

Quick Web Tip , Part Two

Saturday, March 1st, 2008

Ok…just finished part one, but this second tip will be a lot quicker and less confusing.

I know whenever I am testing a site (on my Mac) I am frustrated by the fact that I cannot test on Internet Explorer, which I believe is still well over 50% of the viewing public. That is without launching Parallels, Bootcamp, or something similar. But that wastes some time, and there are some other browsers that I don’t have that I should probably check too – not to mention previous versions which I have long ago overwritten with newer versions of browser.

Well fret no more, if you did before, because there is a site which will test your site on a wide variety of browsers, over different verions, on different platforms.

BrowserCam is an amzing website which lets you upload html, or even a site that is currently live and takes snapshots of it in the browsers that you select. I selected every browser and it gave me something like 120 different images of my about page (Mythtaken). Now when I was using the site, the speed was really slow, but the service is certainly cool.

Posted in HTML | No Comments »

Quick Web Tips/Notes, Part One

Saturday, March 1st, 2008

I always find it interesting as I teach or work in my daily life, how little things that you might accidentally discover may revolutionize your workflow, or maybe add some efficiency to your practices.

While reading up more on web standards and practices, I have come upon two little neat things that have helped immensely with two headaches I have had in the past concerning website creation.

Headache #1: When working with something like a blog where you need some links to launch in a new browser – but you don’t want every link to launch a new browser window.

Why a headache: Well suppose you put your blog in as a frame in your website, and it is perfect for the blog size, but external sites look really bizarre embedded in your site (beside the potential for copyright issues). But if every link opens up a new page, every internal link you have also opens a new page, leading to the potential for dozens of open pages.
Well, if you yourself are writing all the content you can always write your own targets for each link, but if you have people contributing who don’t write in HTML – well, problem city.

Solution:

Part 1: Writing code that makes all links launch in a new window. Solves the issue of links appearing inside your frame – but means a new launch window for every link clicked. (I could also write this directly into CSS, but in this example, I don’t have access to the CSS)

(using [ instead of < and > so it can be read not as code)

[base target='_blank'][/base]

Part 2: Naming the target blank window, so that all links will go to the same window.

[base target='display'][/base]

Now when you click on a link it will open up a new window, but all future links will open in that same window (named "display").

Neat little bit of knowledge though not hugely applicable for most situations, where you will probably write targets inline, or as CSS. But even in CSS, naming the window vs. having all windows open up is the same.

Posted in CSS, HTML | No Comments »