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)

!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

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.

Meeting Summary

133 InDesign users turned out for our January meeting to help celebrate the 10th birthday of Adobe InDesign. Those who came a few minutes early were treated to Birthday cake provided by Adobe Systems. Leslie Dimond decorated the cake, complete with a text frame, a nice serif typeface (properly kerned), hidden characters displayed and an overset text indicator! (Yes, it was photographed — see below.)

The first presentation of the evening was by James Fritz from C2 Graphics Productivity Solutions in Milwaukee. James gave a content-packed, fast-paced tutorial on tricks for working with long documents. In just over an hour, he covered how and why to use the Book panel, how to create and update an automatic Table of Contents, tons of Style formatting tips, how to work with section markers, how and why to use Object Styles, and neat trick for automatically inserting Anchored Frames in text, and much more. It was a fantastic presentation that covered a lot of territory, and everyone learned something they could take home to make their work more efficient.

The second presentation was by Keith Gilbert of Gilbert Consulting. He explain how the little-understood “Balance Ragged Lines” feature works, and when you would want to use it for long documents. He explained how it works with Paragraph Styles, and then explained how to use a free script that he’s written that provides additional options for working with the Balance Ragged Lines command.

The evening concluded lots of great giveaways: books, software, iTunes gift cards, and more provided by Central Coast Solutions, Peachpit Press and Adobe Systems.

Thank You

Once again, the facility fee for the evening was generously underwritten by MCAD and Central Coast Solutions. Their support is why the Twin Cities InDesign User Group meetings continue to be completely free for registered members.

Comments from the evaluation sheets

• My head is spinning from all the tips from Fritz. Great!!
• Amazing! A ton of info.
• Fritz is a very good presenter and was full of good information. Keith knows how to explain complex topics in an easy-to-understand way.
• This was one of the best ones yet! Thanks!
• Tonight was pretty cool. It was great to learn some new tricks. Wow…Styles…What hell have I been living through…I need to convert.
• Fritz is an energetic and entertaining speaker. The long document topic is helpful. Loved Keith’s exposure of an obscure command. I’m to busy to explore all those. Now I can use it.
• Thank you for providing this opportunity! Excellent presenters and good info. It’s great to have this resource close to home.
• That was great info. I am not dreading my next catalog as much.
• Great workshops. Can’t wait to use the tricks! Thanks.
• James Fritz was wonderful! Very entertaining and super informative and squeezed in hints and shortcuts and was amazing with his automation! Makes long documents sound more than manageable and I couldn’t believe the efficiency that’s out there! Can save a ton of time and money!
• I am so glad I made attending the priority I did…EXCELLENT tips!
• Very valuable!…Yummy Cake!…Awesome!…A+
• A huge amount of info in a short time.
• I learned more about style sheets in an hour than I did in 2 years with Quark.
• Fritz rocks! I learned so much! I couldn’t write things down fast enough!
• Information packed and practical. I am recommending this to my peers. I appreciate the opportunity to be here. Thank you for your willingness to put these sessions on. I grew today! Yeah!
• Many excellent tips! (Can’t believe all the time I’ve wasted doing things the hard way!)

Ideas we’ve been rolling around include blogging for professionals, 3D techniques, Video, mobile app development, After Effects and more! What do YOU think?

There are 3d applications to fit every budget, purpose and skill level, from Google Sketchup for architectural plans, all-around programs like LightWave and Cinema 4d, to high-end applications used in gaming and Hollywood like Softimage, Maya and 3d Studio Max.

Every studio should have a person on staff who can service their customers with some type of 3d skill. How do you determine which software is right for your clients, your workload and your personnel’s skill levels and focus?

October 9th’s $5 Friday will help you navigate into the world of 3d, help you to figure out when to move into 3d, find out what software will suit you best, and even when to call in the big guns, like Radiance Media.

Brad Krause/Radiance Media has been creating every kind of 3d illustration and animation in the Milwaukee area for the last 5 years. He’s created TV commercials, movie monsters, 3d logo animations, product, medical, mechanical and architectural previsualizations, character animation… you name it. Prior to going freelance, he worked at a number of graphic design and advertising agencies, so he knows how 3d can fit into a variety of creative environments.

After a show-and-tell of some of his projects, Brad Krause will talk about integration of 3d into graphic, video and web design workflow, basic 3d concepts, tools and navigation, and the differences between major 3d applications.

Here are a few things C2 is actively doing to help our clients stay abreast of developments and harness local resources:

• C2 uses the tools to build our brand and develop internal case-studies for business-to-business use of SM tools.  Twitter, Facebook, LinkedIn

• C2 provides customized SM overview training for clients, makes recommendations to clients who want to outsource SM to local experts/resources

• C2 participates as hosts, sponsors and speakers at regional SM seminars and training events.  http://www.socialmediamilwaukee.com/recap.php, http://www.sohobiztube.com,

• C2 is working with Jason Weaver from Sway, creators of  Shoutlet, a SM distribution and measurement tool, to develop certification-level training. We’re working on getting 5 of our instructors certified in Shoutlet, so we can offer training to Shoutlet users as well as advanced SM implementers.

We’ll update you via the blog as we further develop our knowledge and presence in this new channel. Stay tuned!

July 14 Web Design for Print Designers Made Easy seminar is SOLD OUT! We’ve opened a second session at the same venue on August 11, click HERE to register.  (Coming to Madison as soon as we find a host location!)

July 24 Third Ward GALLERY NIGHT with the kids from OnRamp. Come to the lobby at 222 East Erie Street to see and purchase the cool Milwaukee-centric T-shirt designs of the 12 ambitious high schoolers who participated in OnRamp.  Want to see some of the designs and learn more about the program? Click HERE

OnRamp organizers were recently interviewed by 89.7 Lake Effect…Listen HERE

August 21 $5 Friday: The Art and Business of Professional Illustration + Advanced Digital Illustration Techniques  Register HERE

More pro devo: Want to attend upcoming AAF-Madison, AIGA, AMA, BMA and other local (Madison and Milwaukee) professional organization, meet-up and user group events?  Check out our PIPELINE!