CSS and HTML Today – PubCon 2010

I recently attended PubCon 2010 in Las Vegas, NV.  The conference ran 8 tracks with 4 sessions every day. With 32 sessions to choose from eachday, it was a task to choose 1 session to the exclusion of 7 others.  

The frist session I attended was CSS and HTML Today. It was a panel of 4 industry experts moderated by Ralf Schwoebel. Each panelist presented info about different topics related to CSS and HTML. 

First up was Benj Arriola, SEO Director, Internet Marketing, Inc. 

SEO Tip from Benj: If you have multiple links on a page that link to the same page, only the text of the first link is considered by the search engines for ranking.  

Q: Does the order of your content inside the HTML document matter? 
A: Yes it does. Put the main content first, then float the left and right sidebars. Benj referred to A List Apart’s article,  Multi-Column Layouts Climb Out of the Box.  CSS facilitates the ability to put HTML document components out of order – and – have them display properly on the website.
CSS HTML Today Dawn Wentzell

Dawn Wentzell talking about Microformats

Next up was Dawn Wentzell, Senior Account Manager, Outspoken Media. Dawn spoke primarily about Microformats.

“A microformat…is a web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata [data about data] [1]… This approach allows software to process information intended for end-users (such as contact information, geographic coordinates, calendar events, and the like) automaticallymore from Wikipedia
  • Microformats are Structured Markup – Semantic markup
  • Google’s rich snippets enhance search results displays
  • Google supports microformats, RDFa, Microdata, Good Relations, Merchant Fees, XML sitemaps supported for videos
  • hCard

    • for people and places – address, phone, name, company – based on a vCard standard
    • Mark up your business address on your website with hCard (for Google) – saying since 2007. Google is actively scraping now for this information.
    • Linked IN is using hCard to to markup each person’s information
  • • hReview
    o Yelp, Amazon use hReview
     Reviews on movies, etc.
     See hReview code smoke in code – displays with stars
    o Markup testimonials on your website using hReviews
    • hCalendar
    o on your website events –
    o You actually get more screen real estate on Google search results when using hCalendar
    • hRecipe
    • hProduct – retail products – Combine with hReview – hProduct  just announced last week.
    • When implemented by more sites, people will be able to comparison shop in Google – by the information that Google supplies  in the SERPs
    • Use microformats – wide support in technology and Google’s Snippets
    • Very easy to implement
    • Increase in CTR from SERPs – click through rate increase – if your result has the microformat and others don’t – listing got better click through because listing looked different from the rest.
    • Con – other formats – developers like RDFa – which microformat will emerge as the leader?
    • Data is easier to scrape
    • Only Big Brands have rich snippets displaying in SERPs?? Check this out.

Ted Ulle – HTML5  

IETF – Internet … Task Force  

HTML 4 – 1999  

• Standardizes ERROR handling. All browsers will have the same response.
• Will standardize JavaScript APIs
• Common script functions move to the browser
2006 Google research discovered these standard definitions at websites
o <na>
o <header>
o <footer>
o <section>
o <article>
o <aside>
• Dynamically draw and update graphics with Canvas
• Tags for Magical Forms – Smart tags – autocomplete, placeholder, required, meter, search, email, urls, tel (telephones),
• Media will become browser-native
o Still arguing about format and patents (<audio>, <video>)
• Browser support –
o IE 9 – workaround (JavaScript) for older versions

CSS and HTML Today, a PubCon 2010 Session

Panelist Todd Kemp looking to Ralf Schwoebel (moderator) and panelists Ted Ulle, Dawn Wentzell, and Benj Arriolla for confirmation on one of his points.

Todd Keup – coding client side and server side. – jQuery  (magnifisites.com)  

• JavaScript Library –
• jQuery – easy to use and well documented.
o Code is minimized
o Get source code version
• jQueryUI – User interface for jQuery
• Use tutorials
• jQuery plugin – cycle – rotating carousel/marquee – control button on the bottom right

HTML5 Presented by W3C Heavy-Hitter

Woo Hoo! Got a reminder this am from a business colleague. We are heading to the Boston PHP meetup tonight for a presentation about HTML5, the next version of HTML.  This presentation is of very great interest to me because it is the language that the browsers use to display websites. (Even if a website is “written” in PHP, the PHP code generates HTML.)

The presenter is a W3C heavy-hitter, and, I have high expectations.  I am looking forward to learning new tricks and about upcoming capabilities that I can (eventually) incorporate into website and blog projects.

Description of HTML5 Meetup (taken from the e-mail reminder):

HTML5 is being developed as the next major revision of HTML. Along with technologies like SVG, CSS3, and various APIs, the HTML5 Platform aims at enabling rich Web applications, including with video and graphic animation. Major Web browsers are all rushing to implement this new wave.

Many great new features such as:

New HTML elements and attributes
Built in APIs like Drag and Drop, Video, Audio, and Geolocation
CSS3 goodies: New Selectors, Borders, Media Queries, Transformations, Transitions, etc.
Local storage: Web Storage, Indexed Database
Web workers
Video element
Canvas and its 2D API
Scalable Vector Graphics (SVG)
WOFF, the Web Open Font Format
and much more…

This will be presented by Philippe Le Hegaret of the World Wide Web Consortium (W3C). Philippe heads the team responsible for standardizing frontend Web technologies including HTML5, CSS3, SVG, WOFF, or Web APIs. He is a former Chair of the Document Object Model (DOM) Working Group and wrote the first version of the W3C CSS validator back in 1997.

I will report back here about the awesome stuff I learn!

How to Add YouTube Video to WordPress Blog

You’re at YouTube looking at videos. You come across one that you want to include in your WordPress blog.

Here’s how to include a YouTube video into your WordPress blog.

1. Here’s the YouTube video that I want to include:
Ladies Golf Tips: Golf Swing Exercise with the Bosu and OrangeWhip

As the video plays, a panel displays below with “actions” that you can take. Actions include voting to Like (or Not Like) the video, saving the video, sharing the video, or EMBEDding the video.

Embed a YouTube video in WordPress blog

2. To include a YouTube video in your blog, click on EMBED. The embed screen displays.

Border for YouTube video

3. When the embed screen displays, the first section shows the “code” that you need (in order to play the video on your website) in a box with a scroll on the right. When the screen first displays, the code is already selected (see the box with text and the blue “selected” highlight above).

3a. If you do not want to customize the appearance of the video for your website, copy the code. I recommend that you customize the appearance of the YouTube video for your website instead of choosing the default. 

3b. To customize the appearance of the YouTube video,

In the second section…

UNcheck this—> Include related videos
If this option is checked, random videos from random YouTubers will display at the end of the video on your website. I choose specific videos for a specific reason, so, I always UNcheck this because I do not know who’s video will be included nor the quality of the videos that might be included.

CHECK this —> Show border 
Checking this option enables you to choose one of the color schemes (from grey/white to maroon/red displaying in the third section of the screen) that best matches the color scheme of your website so that the video might look like a more “natural” fit. 

UNcheck this—> Enable privacy-enhanced mode [?] 
This option controls YouTube’s use of “cookies” upon displaying the video on your website, clicks on the video, and playing the video. I consider this an advanced option and for most purposes, you can leave it unchecked.  

UNcheck this—> Use iframe embed code (beta) [?]
Since not all browsers and search engines like iframe code, I recommend ALWAYS making sure that this is UNchecked. Frankly, I am stumped as to why YouTube is offering it as an option since YouTube is owned by Google and Google doesn’t like iframe code.  (Boggles the mind!)

In the third section…

Choose the color scheme of the border you would like
YouTube Border Colors for Adventures Online For my WordPress blog, I would choose one of the blue/blue color combinations. I would start with the combination on the left, following these instructions until I could see how the border colors look on my blog. If I thought that the border colors did not meld as much as I wanted, I would follow these instructions for adding a YouTube video to a WordPress blog again, selecting the second blue/blue color combination.

In the fourth section…

Change YouTube Video SizeChoose the size of the video.  The smallest default for this video is “445 × 364”.  That is too wide for my liking. So, I type “400” in the Custom box (on the right), and the height is automatically calculated and displayed. The height is calculated in order to keep the video width-to-height ratio in perspective.  So, unless you are a graphics expert, accept the number the screen displays for height once you decide on the width you want.

 4. As you chose your preferences for the options above, the code in the  box with the scroll changed. Now, back up to the box and select (highlight) the code and copy it.

5. Open another browser window.

6. Log in to your website administration area (dashboard).

7. Open the Post or Page in which you want to include the video.

WordPress blog visual html tabs8. Click on HTML tab on the top right of the icon bars. You are now looking at some of the behind-the-scenes code that WordPress uses to display the post or page.

9. Place the curor in the section of the post or page where you want the video to display.

10. Paste the code into the post or page.

11. Save the post or page.

12. Check the post or page to see that the video is displaying where you want it. If not, open the post or page again. Click the HTML tab and go to the section where the code is for the video. Select the code, copy it, and paste it into another section of the post or page. Save the post or page.

13. Rinse and repeat…This is one of those tasks that takes a little bit of practice. Go through the instructions for adding a YouTube video to your WordPress blog until you get the results you want.

I want the video to display under this statement, so, I typed this statement,

then clicked on the HTML tab on the top right of the toolbar, scrolled down to this statement and pasted the code in. The video naturally displays to the left. To get it to display in the center, I edited the video code like this:
WordPress blog paragraph code

I added paragraph starting and ending tags (shown above in red). In the starting tag, I told the browser to align the paragraph to the center. I would change “center” to “right” if I wanted the video to display on the right, and  to “left” if I wanted the video to display on the left. The closing tag looks like all the other closing tags with a slash before the letter “p”.

Tips: Use all small letters when adding the paragraph tags. Use starting and ending diamond braces <>.

Google Blog Processes Overview

I just attended a webinar entitled Blogging, the Google Way.  The presenter was Karen Wickre (@kvox), Google’s senior manager of corporation communications. Karen gave the 10,000 foot view of the processes that Google has in place for establishing and maintaining a blog in Google. 

Blogging the Google Way WebinarInteresting facts are:

  • Google has over 150 blogs
  • Google has over 80 Twitter accounts
  • Just about every blog post is accompanied by a Twitter announcement.
    This is pretty common practice these days whether you are a sole proprietor or you’re repesenting a corporation. Lots of bloggers, including myself, write in their blog, shorten the URL at a website like bit.ly where  clicks and conversations can be tracked, and then tweet that they just wrote a blog post about “their subject” and paste the bit.ly link at the end of the tweet.
  • No one in Google is a full-time blogger. Google bloggers are regular salaried employees who blog as part of their job.
  • Employees must submit application/request permission to start a blog
  • Some blogs are run internally for a period of time in order to determine commitment of staff and to establish the “habit” of writing. 
    I love this idea, and have recommended in a number of my blog posts over the years that beginning bloggers develop the habit of blogging before moving to a live blog. How to Blog page, Blogging, at Your Website or a Public Site? – 2. (Look at the last time that I blogged. I’ve fallen off the wagon…and now am back on track!)
  • Blogs are reviewed periodically for frequency of posts and compliance to corporate style and tone.

Top 3 blogging tips from Ms. Wickre that I liked the most:

  1. A Good Tile is VERY IMPORTANT. They must be short (for RSS readers and mobile devices) and concisely convey the topic.
  2. Don’t ever delete a post. The readers have already picked it up and placed links in your followers’ inboxes. Deleting a post can create a PR nightmare.
  3. Make post updates obvious by using the word Update, adding the date and the change, and using a different color font. Strikethroughs (don’t want this any more) are okay. Don’t change the timestamp or the title; just re-publish

I enjoyed the webinar. Google’s approach to blogging is on par with any other corporation that is of its size and stature. I worked for a large corporation (Digital Equipment Corporation) and the processes I heard about today are the same that I would expect Digital to have put in place (if it still existed).

What about you? How does your corporation approach blogging? Is there one voice? One message? One tone?

Suzanne Lockwood Much More Than a Boston DJ!

Last week, long-time client Suzanne Lockwood of DJSuzieCue.com sent me an e-mail about her website.  The e-mail ended with “Happy Spring”, and attached was a beatiful photo of flowers from her garden.

Not only is Suzanne a great DJ and wonderful jazz singer, but, now I know she is a talented photographer too! 

Flower from garden in Houghs Neck, Quincy

Flower from garden in Houghs Neck, Quincy© Suzanne Lockwood


White Flowers Houghs Neck Quincy

White Flowers Houghs Neck Quincy © Suzanne Lockwood

Guess those creative types got it going awwwnnn!  File under: You don’t know what you don’t know…