Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 20 2014

16:44

November 21 2013

13:37

15+ Step-By-Step Public Speaking Tips for Web Designers and Freelancers

You may think that as a freelance web designer you don’t need to worry about public speaking. What you don’t know is that there are plenty of speaking opportunities for web designers. Here are just a few of them:

  • Meetups
  • Professional organizations
  • Client presentations

With all of these opportunities, public speaking is great addition to your marketing arsenal. It’s also a good way to establish yourself as an expert in your field.

Beautiful business woman is speaking on conference.

The fact is that giving a talk in public is good for business. Yet many web designers have no idea how to make a presentation.

In this post, I’ll take you through the public speaking process and give you tips to get you through each step–a total of 16 tips in all.

Getting Ready

What you do before your speech is almost as important as the speech itself. Preparation is 90% of the effort. If you’re not prepared, your audience will be able to tell.

Here are five tips to help you prepare for your speech:

  1. Know your topic. Choose a topic that you are already familiar with, but don’t stop there. Spend some time catching up on the latest changes and trends for your subject matter. If you will be demonstrating a software tool, spend some time with the software.
  2. Organize your speech. Don’t try to speak off the top of your head. Even if you are very comfortable with the topic, you need to organize your thoughts. It’s too easy to ramble or lose your place if you don’t. An outline of your main points is a good way to get organized.
  3. Prepare visuals. Presentation software like Microsoft PowerPoint or SlideShare can help you add visuals to your presentation. A benefit of using visuals is that it takes the focus away from you. You can also use the presentation software to create handouts for your audience.
  4. Practice. It’s a good idea to run through your talk several times before you present it. If you can do it in front of a friend or family member, that’s great. If not, try giving your speech in front of a mirror. Be sure to time yourself to make sure that your presentation is not too long or too short.
  5. Dress appropriately. You want to convey a professional appearance, but not appear overdressed. If you are a member of the organization where you will make the presentation, you may already have an idea of the right things to wear. Otherwise, ask.

Once you’ve prepared your speech, you’re ready to give it. The first step in giving a speech is the opening.

Breaking the Ice

public-speaking2
It’s the night of your presentation. Plan on arriving at the location a little early so that you can visit with members and make sure that any equipment you need is set up properly.

Don’t worry if you’re a little nervous. That’s normal. Traditional advice says to picture your audience in their underwear to overcome stage fright, but that doesn’t always work. A better tactic is to pick two or three spots (such as pictures) on the back wall, directly behind the last row, and give your talk to those spots. The audience won’t really know that you aren’t looking at them.

The first thing you need to do when giving a speech is engage the audience. Here are three tips to help you break the ice:

  1. Humor. Telling a joke is the traditional method of warming an audience up. This works great if you’re good at telling jokes (keep it clean, of course), but not everyone can tell a joke effectively.
  2. Location. Another method of warming an audience up is to comment on the location. For example, if you’ve travelled away from your hometown to give the presentation, comment on how much you like a local attraction.
  3. Weather. If you’re totally at a loss on how to open your presentation, you can always make a few comments on the weather. Nearly everyone in your audience will be able to relate to your reaction to rain, heat, or cold.

Once you’ve got your audience’s attention, it’s time to move on to the main portion of your talk.

The Body of Your Speech

As you move into your main topic, remember the following:

  1. Stay calm. Sometimes the transition between your opening and your main topic can be difficult. Remember to stay calm. Breath slowly and regularly. Don’t speak too quickly.
  2. Use notes. You don’t want to read your speech verbatim, but you also don’t want to forget what you were going to say. I recommend using an outline of your main topics.
  3. Not too long. Make sure that your speech is not too long. If there’s not a clock on the back wall, ask someone to silently signal you when you have five minutes left.
  4. Break it up. If you’ve been assigned a fairly long time slot, break it up with visual aids and handouts. If you can think of ways for the audience to participate, that’s good too.

Once you’ve completed the main portion of your speech, you are ready to wrap it up.

In Closing

Mixed group in business meeting

The closing can be one of the most important parts of your talk. Sometimes it is the main thing that your audience remembers about your presentation after they leave, so it is important to plan it carefully.

Here are four elements to include in your closing:

  1. Summary. Your summary is simple. Just list the main points that you just made in your presentation.
  2. Call to action. If you would like the audience to do something (such as buy your product), ask them to do it.
  3. Questions and answers. Set a limited amount of time aside at the end of your speech to answer any questions that the audience may have.
  4. Thanks. Last, but not least, thank your host for inviting you to give your talk. Thank the audience for spending the time to listen to you.

Learn More

Public speaking is truly a skill that improves with practice. The more often you speak in public, the better at it you will be. With practice, you will also become more comfortable preparing and giving presentations.

There are several ways to gain experience as a public speaker. Here are two of them:

  • Toastmasters International.
  • This is an international organization dedicated to improving the public speaking skills of its members. Once you join, you will be given opportunities to speak in public and also receive constructive feedback.
  • Community College. You can also take a public speaking course at a local college. You will be assigned an instructor who will teach you the basics of public speaking and who will grade your presentations.

Your Turn

Have you added public speaking to your skillset? If so, how has your freelance business benefited? Share your thoughts in the comments.

May 03 2011

21:36

How to Create Presentation Slides with HTML and CSS

Advertise here

As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I’m already familiar with? With a bit of fiddling, we can easily create beautiful presentations with HTML and CSS. I’ll show you how today!

The Business of WordPress Theme Design
One Slide from Our Final Product

0 – Directory Structure

Before we get started, let’s go ahead and create our folder structure; it should be fairly simple. We’ll need:

  • index.html
  • css/style.css
  • js/scripts.js
  • img/
  • slides/

A simple base template. Your slides/ directory can remain blank for the time being. We’ll fill that shortly.


1 – Beginning Markup

Let’s begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <link href="style.css" rel="stylesheet" />
   <title>My Great Presentation</title>
</head>

<body>

 <div class="wrap">
   <div id="slides">
      <!-- load in slides -->
   </div>
 </div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</body>

</html>

Above we have some clean, HTML5 goodness. No more type attributes in our script and link elements, short DOCTYPE, a laughably simple meta charset tag, etc.


2 – Slides

The load() method is an AJAX method that loads data from your server, and inserts the returned HTML into the selected element.

Now you might be wondering how we’re going to deal with each slide. We have a couple options here. While we could wrap each slide in its own div, and place a massive block of HTML within the #slides container, my instinct is that this will make the process of editing individual slides more time consuming, as we then have to hunt through all that markup for the slide that we need.

Instead, for this tutorial, I’ve opted to place each slide within its own .html file. We can then use jQuery’s load() method to bring in each slide, and append them to our container.

Create a handful of numbered HTML files, and place them within your slides/ directory, like so:

  • slides/
    • 0.html
    • 1.html
    • 2.html
    • 3.html
    • 4.html

Within each of these files, we’ll insert the markup for your desired slide. As an example, together, let’s create an “About Me” slide.

1.html

<div>
   <h3> About Me</h3>
   <ul>
      <li> Nettuts+ Editor</li>
      <li> Envato Marketplaces Manager</li>
      <li>Wicked WordPress Themes</li>
      <li>Theme Tumblr Like a Pro</li>
   </ul>
</div>

Feel free to mix and match how you wish.


3 – Load the Slides

Before we can focus on the styling of our presentation, we need to load those slides into our document with jQuery. But rather than creating a bunch of global variables and methods, we’ll store everything in an object, called Slides.

var Slides = {

};

Next, the process of loading those slides into our document will be stored within, say, a loadContent() method. Let’s create that now.

var Slides = {
   loadContent : function() {

   }
}

To load all of the slides within the slides/ directory, we first need to know how many slides there are; though, JavaScript doesn’t have the ability to access the file system. Instead, we’ll pass in our total number of slides when we initiate our object.

With that in mind, let’s create an init() method that will serve as our controller, of sorts. This method will also receive an argument that specifies the total number of slides. This will then be assigned to a property of our Slides object.

var Slides = {
   totalSlides : '',

   init : function( totalSlides ) {
      // If nothing was passed to this function, we can't continue.
      if ( !totalSlides ) throw new Error('Please pass the total number of slides to the init method');
      Slides.totalSlides = totalSlides;

      // Load the slides
      Slides.loadContent();
   },

   loadContent : function() {

   }
}

That’s better. But, of course, none of this code will run until we call the init() method.

var Slides = {
   totalSlides : '',

   init : function( totalSlides ) {
      // If nothing was passed to this function, we can't continue.
      if ( !totalSlides ) throw new Error("Please pass the total number of slides to the init method");
      Slides.totalSlides = totalSlides;

      // Load the slides
      Slides.loadContent();
   },

   loadContent : function() {

   }
}

// All right; let's do this. We'll assume that we've created 6 slides, total.
Slides.init( 6 );

4 – Three Ways to Load the Slides

Let’s take our first crack at loading these slides — and then we’ll slowly improve upon our code, as we continue.

loadContent : function() {
   for ( var i = 0; i < Slides.totalSlides; i++ ) {
      $('<div id="#slide-' + i + '"></div>')
         .load('slides/' + i + '.html')
         .appendTo( $('#slides') );
   }
}

Above, we’re creating a new div element for the total number of slides that we’ve specified. Each div will have an id of #slide-n. After we’ve created each element, we then load the contents of the desired slide, which we stored within the slides/ directory. Once this block of HTML has been retrieved from the server, we append the newly created div to the #slides container.

We Can Do Better

This code will indeed work, but we can do better. There are a couple issues with the code above:

  • Traversal: For every slide, we are traversing the DOM for the #slides element. This is wasteful and unnecessary. Also, as we’ll certainly be working with this #slides container element throughout our project, it makes sense to store it as a property of our Slides object. We’ll do this shortly.
  • Reflows: This code will create any number of page reflows, which can increase the load time of our page. Rather than calling the appendTo() method dozens of times (or in our case: six), let’s limit our reflows to one.

Traversal

Let’s first fix the traversal issue.

var Slides = {
   totalSlides : '',
   container : $( "#slides" ),

   init() { ... },
   loadContent() { ... }
}

This way, we search our document for the #slides element exactly once, rather than over and over.

If you’re still confused about the advantages to this, think of it as jumping into a pool, and searching for a coin. Every time you call $('#slides'), the JavaScript engine jumps in the pool and looks for that coin again. Over and over. But, if we instead store the location of $('#slides') in a variable, it never has to jump back into that pool. It remembers where that coin is.

Reflows

Next, we’ll take care of that pesky reflow issue. There are two ways to limit our reflows. We’ll examine both methods.

Document Fragments

JavaScript document fragments allow us to store chunks of HTML. Then, rather than updating the DOM multiple times, as we did before, with this method, we only call appendTo() once.

Refer here for more information on document fragments.

loadContent : function() {
   var frag = document.createDocumentFragment(),
      bit;

   for ( var i = 0; i < Slides.totalSlides; i++ ) {
      bit = $('<div id="#slide-' + i + '">'</div>')
         .load('slides/' + i + '.html')[0];
      frag.appendChild(bit);
      }
   Slides.container.append(frag);
}

Note that we’re no longer calling appendTo() within the for statement. Instead, it’s only being called once. The only note worth mentioning is the [0] section, after we call the load() method. What do we need that for?

Document fragments store — wait for it — HTML fragments, or elements. However, when we called the load() method above, the jQuery object is, of course, returned. That’s not compatible. Instead, we want to filter down to the HTML element, itself. We can do so by using [0], or the get() method. Either option will do.

Hide the Container

Our second option is to hide the container element. When we do so, regardless of how many times you append new elements to that element, no additional page reflows will take effect…because the element is hidden! It’s a nice little trick to have in your tool belt.

loadContent : function() {
  // Hide the container.
   Slides.container.hide();

   for ( var i = 0; i < Slides.totalSlides; i++ ) {
      $(''<div id="#slide-' + i + '">'</div>')
         .load('slides/' + i + '.html')
         .appendTo(Slides.container);
      }

   // Now display the slides container again - causing exactly one reflow.
   Slides.container.show();
}

So either of these two options will do just fine. Choose whichever you prefer.

If you now view our project in the browser — assuming you’ve added some dummy slides to the slides/ directory — you’ll see something along the lines of:

Loaded Content

If we use a tool like Firebug or Chrome’s developer tools, we’ll see that, as expected, the slides have been inserted into the #slides container div.

Source code

5 – Make it Pretty

Our next step takes place within our stylesheet. We’ll be focusing on both aesthetics as well as function here. To make each slide translate from left to right, we’ll need to be clever with our styling.

We’ll begin by creating our canvas. If you refer back to our markup…

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <link href="style.css" rel="stylesheet" />
   <title>My Great Presentation</title>
</head>

<body>

 <div class="wrap">
   <div id="slides">
      <!-- load in slides -->
   </div>
 </div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</body>

</html>

…our wrapping container for our project is the div with a class of wrap. We’ll provide a width of 1180px and center it on the page.

.wrap {
   margin: auto;
   width: 1180px;
   overflow: hidden; /* because children will be floated */
}

Next, because each slide should translate horizontally, we need to make our #slides div as wide as possible.

#slides {
	width: 999999px;
}

Now, the fun — and a little scary — part. Think of a traditional presentation slide. Isn’t the content typically both vertically and horizontally centered on the slide, or page? Absolutely. Because we have 100% control over this project, we don’t need to worry about browser compliance. As the slides will only ever be used by us (during our presentation), we’re free to tailor it to our favorite browser. This way, we get to use lots of fun new features that haven’t yet made their way into all the browsers, such as the Flexible Box Model.

We’ll begin by specifying the dimensions for each slide, floating each slide, and providing some breathing room (margins).

#slides > div {
	height: 600px;
	width: 1180px;
	float: left;
	margin-right: 200px;
	text-align: center;
}
Floating Slides

But remember: that text needs to be vertically centered. Flexible Box Model to the rescue!

#slides > div {
	height: 600px;
	width: 1180px;
	float: left;
	margin-right: 200px;
	text-align: center;

        /* Flexible Box Model */
        display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;

	display: box;
	box-align: center;
	box-orient: horizontal;
	box-pack: center;
}
Adding flexibox

Next, we’ll add a nice radial gradient background to our slides. To be honest, CSS radial gradients still baffle me. I rarely remember the syntax. As such, I typically either make note of gradients in the wild that I like, or use any of the various gradient generators on the web to make mine. Feel free to do the same.

body {
	background-image: -webkit-gradient(
		radial,
		50% 50%, 0,
		50% 50%, 1000,
		from(rgba(245,245,245,1)),
		to(rgba(100,100,100,1))
	);
}
Applying a radial gradient

And, with that, we have our basic structure in place. At this point, I encourage you to being styling your headings, perhaps creating a minimal grid, and anything else you can think of. We’ll finish our minimal styling by working on typography.

#slides h1,
#slides h2,
#slides h3,
#slides h4,
#slides h5 {
	color: #292929;
	font-family: 'League Gothic', sans-serif;
	letter-spacing: -5px;
	margin-top: 0;
	text-shadow: 5px 3px 0 white;
}
#slides > div h2 {
	font-size: 180px;
	line-height: 1em;
	margin: 0;
}

It’s amazing what we can achieve when we tweak letter-spacing, and apply some clever text shadows! Looks much better now!

The Business of WordPress Theme Design
Custom Text

6 – Next Slide, Please

The next step in this project is to handle the process of transitioning from slide to slide. Naturally, as there are no buttons in place, we should instead listen for when either the left or right arrow keys are pressed. We’ll store this functionality in a new keyPress method of our Slides object.

var Slides = {
   ...
   init : function() { ... },
   loadContent: function() { ... },
   keyPress : function() {
      $(document.body).keydown(function(e) {
         // if left or right arrow key is pressed
         if ( e.keyCode === 39 || e.keyCode === 37 ) {
            e.preventDefault();
            ( e.keyCode === 39 ) ? Slides.next() : Slides.prev();
         }
      });
   }

}

jQuery provides the helpful keydown method, which will attach the necessary event listeners. This means that the passed callback function will run for every key that is pressed; however, we’re only interested in the right and left arrow key, or key codes 39 and 37, respectively. If one of these keys is pressed, we first cancel the default action of the arrow key, and then call either the next() or prev() method, dependent upon which key was pressed.

Next Slide

Let’s now work on that next() method that we called above. When this method is called, it needs to execute a few operations:

  • Update the hash in the URL. That way, we can easily send out links to specific slides.
  • Animate the slide to the left, and reveal the next slide in the sequence.

But before moving forward, how do we know how much to translate the slide? It needs to be the width of the #slides container, but we should try not to hardcode that value into our JavaScript if we don’t have to. The reason for this is because, if we later decide to change the dimensions of our canvas, we’d also need to dig into our JavaScript file and update the dimensions as well. Instead, let’s dynamically determine what the width and margins of the container is.

Let’s add a new property to the Slides object, called slideWidth. However, we won’t be able to determine the width of the slides until they’ve been inserted into the DOM, via the loadContent method.

var Slides = {
   ...
   // New property stores the width of each slide
   slideWidth : '',
   ...

   init : function( totalSlides ) { ... },

   loadContent : function() { ... },

   // Determine the width of the slide...
   setSlideWidth : function() {
      var each = Slides.container.children( 'div' );
      Slides.slideWidth = each.width() + ~~( each.css('margin-right').split('px')[0] );
   }

}

Yikes – this line looks a bit scary!

Slides.slideWidth = each.width() + ~~( each.css('margin-right').split('px')[0] );

But don’t worry; it’s really quite simple. We’re updating the Slides.slideWidth property, and are making it equal to the width of the slide plus its margin right. Because retrieving the margin-right value of the slides (specifically the first one) will return px as well, we need to slice that off, which we can achieve quite easily by using the split function.

The double bitwise NOT operator ~~ is used, in this case, to cast a string to an integer. We could alternatively use Math to achieve this.

To clarify the need for casting, assuming that the margin right value is equal to 200px

console.log ( typeof each.css('margin-right').split('px')[0] ); // value is 200. Typeof is still string, not integer.

And with that out of the way, we’re now dynamically determining the width of our slides. Back to our next()method; at all times, we need to track the positioning of our slides. That way, when we transition from slide four to five, we know exactly how much to translate the slide. We’ll store this value in a new property: translateAmount.

translateAmount : '',
next : function() {
   Slides.translateAmount -= Slides.slideWidth;
}

Let’s break it down. When we press the right arrow key the first time, we set the translateAmount property equal to the slideWidth, or in our case, 1380px. If we press right again, this value will be updated to 2760px.

Update the Hash

Within this next method, we should also update the hash value in our url, such as example.com/index.html#slide-1, then example.com/index.html#slide-2, etc. To do so, we need to keep track of the current slide that the reader is viewing.

currentSlide : 0,

...
next : function() {
   Slides.translateAmount -= Slides.slideWidth;
   Slides.updateHash( ++Slides.currentSlide );
},

updateHash : function() {
   location.hash = '#slide-' + Slides.currentSlide;
}

Note that we’re increasing the value of currentSlide by one before passing it to the updateHash function. This is appropriate; when we press the right arrow key, the hash should be updated to the next slide, not the current one.

Animate the Slide

Finally, now that we’ve tracked all of the necessary values, we can animate the slides.

next : function() {
   Slides.translateAmount -= Slides.slideWidth;
   Slides.updateHash( ++Slides.currentSlide );
   Slides.animate();
},

animate : function() {
   Slides.container
      .children()
         .css( '-webkit-transform', 'translateX(' + Slides.translateAmount + 'px)');
}

For best performance, we’ll take advantage of CSS3 to translate the slides. In order for this to not be an instant translation, we need to update our CSS file:

#slides div {
   ...
   -webkit-transition: all 1s linear;
   transition: all 1s linear;
}

And the Previous Slide, Please

The prev method will be really similar to the next method, except for a couple things.

prev : function() {
  // No more left to go back.
   if ( Slides.translateAmount === 0 ) return;

   Slides.translateAmount += Slides.slideWidth;
   Slides.updateHash( --Slides.currentSlide );
   Slides.animate();
}

This time, as we’re transitioning back to the beginning of the slides, we need to reverse the translateAmount and hash value. Also, we must consider the possibility that the user is pressing the left arrow key even when they’re on the very first slide. If that happens to be the case, we shouldn’t do anything, as there’s nothing left to transition to!

Final JavaScript

var Slides = {
   container : $('#slides'),

   totalSlides : '',

   translateAmount : 0,

   currentSlide : 0,

   slideWidth : '',

   init : function(totalSlides) {
      var each;

      if ( !totalSlides ) throw new Error('Please pass the total number of slides.');
      Slides.totalSlides = totalSlides;

      Slides.loadContent();

      each = Slides.container.children('div');

      // Determine the width of our canvas
      Slides.slideWidth = each.width() + ~~( each.css('margin-right').split('px')[0] );

      Slides.keyPress();
   },

   loadContent : function() {
      Slides.container.hide();
      for ( var i = 0; i < Slides.totalSlides; i++ ) {
         $('<div id="#slide-' + i + '"></div>')
            .load('slides/' + i + '.html')
            .appendTo(Slides.container);
         }
      Slides.container.show();
   },

   keyPress : function() {
      $(document.body).keydown(function(e) {
         // if left or right arrow key is pressed
         if ( e.keyCode === 39 || e.keyCode === 37 ) {
            e.preventDefault();
            ( e.keyCode === 39 ) ? Slides.next() : Slides.prev();
         }
      });
   },

   next : function( ) {
      Slides.translateAmount -= Slides.slideWidth;
      Slides.updateHash( ++Slides.currentSlide );
      Slides.animate();
   },

  prev : function() {
     // No more left to go back.
      if ( Slides.translateAmount === 0 ) return;

      Slides.translateAmount += Slides.slideWidth;
      Slides.updateHash( --Slides.currentSlide );
      Slides.animate();
  },

  animate : function() {
     Slides
      .container
      .children()
         .css( '-webkit-transform', 'translateX(' + Slides.translateAmount + 'px)' );
  },

  updateHash : function( direction ) {
     // Update current Slides and hash.
     location.hash = '#slide-' + Slides.currentSlide;
  }
};

// All right; let's do this.
Slides.init(6);

Complete

All finished. That wasn’t too hard, once we dug in a bit! The great thing is that, if you view the presentation on a really high or low resolution, you can simply zoom in or out a few clicks to compensate, by pressing Command or Control +-. Let me know if you have any questions or recommendations!

The Business of WordPress Theme Design
A Slide Example
License Slides

January 07 2011

13:21

Creating And Distributing Presentations On The Web

Advertisement in Creating And Distributing Presentations On The Web
 in Creating And Distributing Presentations On The Web  in Creating And Distributing Presentations On The Web  in Creating And Distributing Presentations On The Web

Delivering great presentations is an art, and preparing the slides for them very much so, too. But we’re not going to talk about that. We’re also not going to get into the debate about whether to use open or closed technologies to create slide decks — this is something you need to hash out yourself, and there are some interesting discussions going on.

What I will talk about is how I (and you, of course) can use the Web to find content for your talks, record them, share them with others and save them for future audiences. I’ll also explain how to share it all for free and how to convert closed formats into open ones by using the Web.

In 2010 I delivered a boatload of talks that people attended, downloaded, commented on and remixed for their own training sessions and presentations. I love to share my research and information, because when you set them free they can inspire and help others to get their own voices heard. Here’s how I did it.

Free Tools For Recording And Spicing Up Talks

Let’s begin with the only paid-for system I use in the whole process: I write my slides in Apple’s iLife application Keynote. I use it because when I do my work I’m usually offline (on trains, in airport lounges, in hotel rooms without free connectivity, etc.).

Keynote is great: I can resize and mask images, embed video, export as PDF, and there are a lot of beautiful, subtle and effective animations and transitions. Creators of slide tools should view Keynote as a model, and 280slides actually did so. Apple should also consider using a standardized format for HTML slides to import; in fact, this is one of the interesting discussions going on.

If I need to use high-quality images, I don’t spend money or time getting licensed content. Instead, I go to the advanced search option on Flickr, find photos with Creative Commons licenses and use these. All I need to do then is publish a link with each photo in my slides. Even I can do that much for copyright law.

Advanced-search in Creating And Distributing Presentations On The Web
Flickr’s advanced search interface lets you specify the license of photos. You’ll probably want “Creative Commons” or “license-free.” Also check out The Commons for good old photos that have been donated to Flickr by libraries and museums.

Sharing Slides, Archiving The Originals

When I finish working, I give my talk using Keynote and export it as a PDF for sharing on the Web. I share my talk by uploading it to SlideShare, which entails the following:

  • The talk gets converted to an embeddable Flash movie;
  • The talk becomes an HTML transcript shown on the SlideShare website;
  • The talk is hosted on its server, which means I don’t have to pay for traffic;
  • People can “favorite,” bookmark and comment on my slides.

In addition to hosting my work on SlideShare, I usually also zip the original Keynote file; Keynote doesn’t format presentations as individual files, but rather as a folder of resources. I upload them to Amazon S3, where I pay a few pennies a month to store heaps of data. This is my back-up archive should anything terrible happen to SlideShare or my computer.

Asking For Feedback, Offering Code Examples

Another interesting service for speakers is SpeakerRate, where people can — wouldn’t you guess? — rate speakers and their talks. SpeakerRate also has an API that allows you to pull out the ratings in case you want to show them off on your portfolio.

I normally host code examples from my presentations on GitHub. There, they are accessible, and I can update and edit the code without having to create my own ZIP files for people to download. It’s incredibly useful for making quick changes in response to what people have requested in comments and for reacting to questions you received during the talk.

Hosting your code on GitHub automatically begins the process of versioning. People can embed and alter your original examples, and the code is displayed with color-coding, making it readable.

Setting up an account on GitHub and getting your code in there is pretty straightforward — just follow the simple tutorial.

Recording Talks

I normally record my talks so that I can listen to them in the gym and other places where I can’t write. There’s a free tool for this that works across all platforms. It’s called Audacity. Just hit the record button and it will create the audio file where you specify.

Editing in Audacity is as easy as cropping the things you don’t want:

Audacity2 in Creating And Distributing Presentations On The Web
Large view

You can save the audio in MP3 or OGG (among other formats). I usually save them as MP3s and then add them to iTunes for tagging so that I can add cover art and other extras to prep them for the iPod.

Syncing Audio And Slides

With SlideShare, you can also create a “Slidecast” of your talks, which means syncing the audio and the slides. It’s a cool feature, but I don’t like the editor as it is; the handles used to define the start and end times of slides don’t allow them to be close together — and that can throw off the syncing. It’s also a time-consuming process. I’m working on some alternatives, and correspondence with SlideShare indicates that it is, too. Regardless, I’ve found that Slidecasts get a lot of visitors, so it can be worth it.

Recording Video

There was seldom a camera to record me wherever I spoke last year, and an amazing amount of recorded talks never see the light of day. If no camera is available to record your talk, then you can record the screen as you present.

One of Keynote’s lesser-known features is that you can record a video of your slides with a voiceover. Simply go to Play → Record Slideshow before giving your talk:

Why-of-html5 in Creating And Distributing Presentations On The Web
Large view

When you’re finished, export the video to QuickTime by going to File → Export:

Export in Creating And Distributing Presentations On The Web
Large view

If you don’t use Keynote or if you jump in and out of your presentation, then record the presentation on your computer screen. There are a few pieces of software to choose from for that.

VLC is a video player that’s free and compatible with all operating systems. It can also record the screen; go to File → Open Capture Device → Screen. You can record a high-quality video of everything that goes on. There’s even a feature that records a part of the screen by following the cursor.

Open-source in Creating And Distributing Presentations On The Web
Large view

Simply check the “Streaming/Saving” checkbox, click “Advanced,” and define a suitable location and settings for your video:

Presentation3 in Creating And Distributing Presentations On The Web
Large view

Screencasts are generally a great idea. Instead of performing live demos in my presentations, I record screencasts and embed them in Keynote. That way, I don’t need an Internet connection — they’re usually unreliable at conferences — and I can talk over the recording while on stage, rather than having to click, enter information and talk at the same time.

To screencast with a program other than VLC, I usually use the commercial app iShowU. When I was still using Windows, I had Camtasia. Both of these sit on your screen and let you record and pause easily:

Presentation4 in Creating And Distributing Presentations On The Web
Large view

Nowadays, I also use hosted services.

Screenr is absolutely fabulous for this purpose. Just start the applet on the page, grant it access to your machine, and start recording. You have five minutes, with audio. When you’re finished, the movie is automatically converted, and you can export the video to YouTube. The video conversion happens more or less in real time. All you need to sign into Screenr is a Twitter account. With Screenr you can also tweet an embeddable version of the video. If you need similar service for longer videos, check out Screencast-o-matic.

Converting Video

The free tool I use is MPEG Streamclip, and it’s available for Mac and Windows. Drag your video onto it, and select the format you need:

Mpeg-stream2 in Creating And Distributing Presentations On The Web
Large view

There are a lot of presets — iPod, iPad and so on:

Compression in Creating And Distributing Presentations On The Web
Large view

Automatic Conversion And Hosting For Audio And Video

As you know, embedding videos on websites with HTML5 can be a pain, particularly when it comes to encoding them. Different browsers require different codecs.

There is, however, a simple way: Archive.org hosts all kinds of useful content. (The WayBackMachine, which keeps snapshots of how websites looked at a certain time, is probably the best known.) And you can host content there if you license it with Creative Commons. The good news? Archive.org automatically converts your content to HTML5-friendly formats!

Check out the recording of my talk on HTML5 for gaming. I recorded it with Audacity and saved and uploaded it as an MP3. The Ogg version was created by Archive.org. To embed it on a Web page, I just need to do this (line breaks added for readability):

<audio controls>
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.ogg">
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.mp3">
</audio>

The same goes for video: free, fast hosting without limits, and automatic conversion. What more could you want?

Converting SlideShare To HTML

SlideShare creates embeddable Flash versions of my Keynote files (saved as PDF). I want to go with open technology and convert them back to HTML and images. You can do this with the mobile version of SlideShare.

If you call up a SlideShare presentation on a mobile device, you’ll get an HTML version with JavaScript and images. You can simulate this by sending the user agent of, for example, an iPad to the page before displaying it. In PHP, this takes a few lines of code:

$url = 'http://www.SlideShare.net/cheilmann/
        the-why-of-html5-for-games-development';
$url = preg_replace('/.net\//','.net/mobile/',$url);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0(iPad; U; CPU iPhone OS 3_2
like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko)
Version/4.0.4 Mobile/7B314 Safari/531.21.10");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$page = curl_exec($ch);
curl_close($ch);
echo $page;

Slidesharemobile in Creating And Distributing Presentations On The Web
Large view

I’ve scraped and converted the results, and now I can embed the SlideShare presentation as HTML and images using the converter tool:

Slideshareconverter in Creating And Distributing Presentations On The Web
Large view

I still want to fix a few things, such as making the images preload intelligently and adding proper alternative text. SlideShare creates transcripts of your slides on the page, but if there are slides without images, then the two go out of sync. I’ve emailed the company about it, and a fix might be released soon.

Summary

When it comes to publishing presentations online, a lot can be automated by using the Web as a platform and taking advantage of conversion services. Many developers are working on Web-based presentation tools, and I am quite sure we’ll see a collaborative presentation platform come into existence this year, although the task might not be as easy as it sounds. I have listed the hidden requirements of presentation systems before, and some things still need to be fixed. Keep your eyes open and help the cause.

(al)


© Christian Heilmann for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: embedding, presentations, slideshows, Tutorials, video

June 16 2010

16:08

10 More Awesome Web Development Screencasts and Presentations


Last year, around this time, we posted an enlightening list of twenty web development video screencasts from around the web. Today, the same tradition continues, a bit expanded with some presentations from the web world.


1. Infinite Carousel

Remy Sharp from jQuery for Designers teaches you how to make an infinite sliding carousel, much like the one that used to be featured on Apple’s website.

The tutorial itself is forty minutes long, but is also available in article form on the website.


2. Choosing the Right CSS Framework

SitePoint CTO, Kevin Yank, presented this talk at Web Directions South 2009 in Sydney, Australia. In this session, the landscape of CSS frameworks was surveyed.

There are a number of different approaches, and some are better than others. Choose the right framework and youíll save yourself a lot of work. Choose the wrong one, and youíll find your projects weighed down by restrictive assumptions and masses of code that you don’t understand. When it comes to CSS frameworks, making the right choice is everything. By the end of this session, you might just decide that the right framework for you is no framework at all.


3. Styling an Individual article in WordPress

As many of you might know, the “individual article style” movement is becoming more and more popular these days in the blogosphere. Starting with an excellent designer and primarily influenced by print design, this is one of the most exciting features to be widely deployed in blogs.

In the screencast, Chris Coyier from CSS Tricks, discusses how to replicate a similar art style in WordPress and takes you through the process of making one of his styled blog posts.


4. Six Things Every jQuery Developer Must Know

Elijah Manor, a developer for Sommet Group, shares some great tips for jQuery developers in this hour-long video presentation you should definitely check out.

Note: Although all the facts from the presentation are well explained, you should still have at least a basic understanding of jQuery and JavaScript before watching. We recommend learning from ThemeForest’s jQuery basics screencast series.


5. Why ExpressionEngine is Great for Designers

As said before, Jason Santa Maria is one of the original movers of implementing some elements from print design to the web. What many don’t know is that his own site is actually developed around ExpressionEngine, an excellent CMS.

Jonathan’s presentation provides great examples of some sites and design companies that are using ExpressionEngine. He then provides an excellent walkthrough of all the features and power that the CMS has.


6. ASP.NET from Scratch

In case you missed it, Jeremy McPeak started an ASP.NET series here on Nettuts+ several months ago, teaching you how to code from an absolute zero.

So far we’ve covered the installation, making a simple contact form, some C# basics, SQL server and master pages, but you can expect more tutorials coming in the future; so stay tuned!


7. 18-part WordPress Series

The former Themeforest blog still has some great stuff on it. One of them is this eighteen-part tutorial series on how to build a complete WordPress site.

This is a must-watch for every beginning WordPress developer, since everything from installation to slicing and coding a website is covered. (And even you, experienced developers, could use a reminder – right? :) )


8. WordPress Security Tips

Along with a great article, Brad Williams provides a video presentation of some of the best WordPress tricks you can do to aid your on line security. Be sure to read thoroughly, because this might just be the best thing to happen to your WordPress installation in years!


9. The Future of HTML 5

Bruce Lawson gave this talk at FOWA London 2009 about the HTML 5 (originally called “Web Applications 1.0″) specification and its implementation in modern browsers.

He claims that it is “a pimped-up version of HTML 4,” and also shows you a couple of cool demos which embrace its power to the fullest.


10. How to Design a Portfolio Site

In this two-part series, designer Elliot Jay Stocks discusses the process involved around building his own portfolio, and also shares some useful tips on designing portfolios in general.

The first part is mostly oriented around design, while Elliot reviews the HTML, CSS and PHP (for WordPress) in the second part.


I hope you found this list helpful, since I tried to encorporate a bit of everything. Do you think any other videos deserve to be here? I’d love to talk with you in the comments.

April 24 2010

15:48

January 17 2010

16:56

December 30 2009

11:29

7 Must-See Web Design Videos and Presentations

By Louis Lazaris

Not many of us will have the opportunity to attend or participate in a live web-related event, conference, or presentation. But that doesn’t mean we can’t benefit from the information exchanged at such events. Many of the sites associated with those events provide supplementary information, summaries, presentation slides, plus audio and video footage from the presentations given.

In this article I’ve assembled a short but diverse list of presentations related to design and development that I think everyone will find both informative and entertaining. I’ve included a brief description of each presentation, along with some notable quotes and related links. The final presentation in this list is a tongue-in-cheek performance that is a must-see for anyone involved in web development for the past 5 or 6 years.

Work in 7 Must-See Web Design Videos and Presentations

CSS Frameworks: Make the Right Choice

Speaker: Kevin Yank

This presentation was recorded on October 9, 2009, at Web Directions South in Sidney, Australia.

Kevin Yank of SitePoint discusses what CSS frameworks do, how to choose a CSS framework, along with some of the pros and cons of four types of CSS frameworks: CSS resets, grid-based frameworks, “pre-fab” frameworks, and frameworks that use CSS abstraction.

Notable Quote:

“By the end of this session, you might just decide that the right framework for you is no framework at all.”

Further Information:

JavaScript: The Good Parts

Speaker: Douglas Crockford

This talk took place on February 27, 2009 as part of the Google Tech Talks Web Exponents series.

The presentation is based on Crockford’s book and reveals the good and bad parts of JavaScript, along with an audience Q&A.

Notable Quote:

“JavaScript is the only language that I’m aware of that people feel they don’t need to learn before they start using it.”

Further Information:

Search User Interfaces

Speaker: Professor Marti Hearst

This talk took place on November 23, 2009 as part of the Google Tech Talks series, and is based on Professor Hearst’s book Search User Interfaces.

The discussion covers specific chapters in the book and presents “the state of the art of search interface design, based on both academic research and deployment in commercial systems.”

Notable Quote:

“The paradox of web search: Why is designing a search interface difficult? Why is it easy?”

Further Information:

Design Inspiration

Speaker: Fabio Sasso

This presentation by the owner of Abduzeedo, took place at Front End Design Conference on July 31, 2009.

Sasso discusses his personal sources of design inspiration and includes some interesting comments on the challenges facing Brazilian designers in today’s market.

Notable Quote:

“For me, the only way to come up with a good design is to try.”

Further Information:

Panel Discussion from FOWD Conference

Speakers: Andy Clarke, Josh Williams & Jeffrey Zeldman

An older presentation from Future of Web Design 2007.

A very funny, and thought-provoking panel discussion covering a number of topics including the recent trend of developers working more on personal projects, plus some thoughts on web standards, web design education, dealing with clients, and more.

Notable Quotes:

“If you say you’re going to talk about web design, reporters aren’t interested. It’s web, so it’s kind of bad design, isn’t it? My kid can do it.”

“We have bad clients who say ‘Is that three pixels wide? Shouldn’t it be four pixels wide?’ They’re clients, so ‘Where did you go to art school?’ is not an approriate answer. So you say ‘That’s interesting, four pixels. We hadn’t thought about that.’

Further Information:

A More Tangled Web

Speaker: Eric Meyer

This presentation by Eric Meyer took place on November 5, 2009 at Build Conference.

Meyer discusses universal uses for HTML and CSS, the death of the browser plugin, and shares an interesting viewpoint on the proposed completion date of 2022 for HTML 5.

Notable Quotes:

“The advancement of CSS is really a lot like a marathon, complete with the staggering dehydrated people at the end of the 26 miles, that you just want the medics to pull them off the course, and they keep waving them off, and it’s really sort of sad and pathetic. This is kind of what CSS development is like now.”

“The really big shift that is happening… is the shift to the web becoming a client-side computing platform.” (Tim Berners-Lee)

Further Information:

How to Bluff Your Way in Web 2.0

Speakers: Andy Budd & Jeremy Keith

This presentation took place in March 2007 at SXSW Interactive.

This is an absolutely hilarious and well-prepared presentation by two of the most notable names in web development. A must-see video covering web 2.0 buzzwords, design, fonts, web 2.0 bingo, and more. The hour closes with a serious summary of the impact of web 2.0, what it really means, and what direction it should go in.

Notable Quotes:

“Web 2.0 is a state of mind. It’s a zen thing. The sound of one hand clapping.”

“In this design, what’s important are the reflections; lots and lots of reflections. Everything’s wet in web 2.0 — wet floor, wet ceiling. So this is a great example of the web 2.0 design style.”

“And remember, Ajax is more than sliding, moving, and fading stuff. It’s an acronym, and that acronym stands for Accessibility Just Ain’t Xciting.”

“It’s all about community. Because none of us are as dumb as all of us.”

Further Information:

Related Resources

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him through his website.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl