Archive for January, 2011
Design Criticism and the Creative Process
Only use ems for the total width of em-based layouts
Using the em unit to specify the width of a website layout is one of several ways of adding a bit of flexibility to your design. If you’re not familiar with em-based – or elastic – layouts, I wrote a bit more about how they work a few years ago in Fixed or fluid width? Elastic!.
The reason I’m bringing up em-based layouts is that I want to highlight two things that are often overlooked. One is setting a maximum width for the overall layout, the other is using percentages to specify the widths of child elements like columns.
Posted in CSS.
Free HTML 4.01/HTML5 WordPress Theme: Spectacular
 |
Today we release Spectacular, a free WordPress theme that aims to provide a warm and pleasurable atmosphere for personal musings and ramblings. The theme comes in two flavors: HTML 4.01 and HTML5. Also, both German and English versions of the theme are included in the download package. The theme is cross-browser compatible and supports Opera, Safari, Chrome, IE7+, and FF. Support for IE6 is not available, though the theme works in IE6, too.
The theme was commissioned by Smashing Magazine and designed by Maleika Esther Attawel exclusively for Smashing Magazine. As usual, the theme is absolutely free to use in private and commerical projects.
Download the theme for free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.
- live demo
- large preview (.jpg, 1.2 Mb)
- download the .zip-package (zip, 21.1 Mb, including instructions)
Screenshots
Front page area (large preview)
Table and content (large preview)
Front page area (large preview)
Thank you, Maleika. We appreciate your work and your good intentions.
Feel free to suggest your ideas for the freebies you’d like to see on Smashing Magazine in the comments area below.
© Smashing Editorial 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: Freebies, themes, wordpress
More on jQuery: Slider Plugins and Tutorials
|
|
There are a large amount of sites that use image sliders to emphasize content by using jQuery plugins. In today’s post we provide you with yet another collection of some fantastic resources for all of those among you who are interested in learning how to create image sliders with jQuery, and more!
jQuery Slider Plugins
Slidesjs
Slidesjs is a crazy simple slideshow plugin for jQuery. It’s easy to implement, customize and style. What could be better? With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination, and the list goes on:
Nivo Slider
A simple jQuery slider with lots of transition effects and also easy to use and implement. One of the best jQuery image sliders out there:
AviaSlider
AviaSlider is a jQuery plugin with 8 transition effects with lots of easy to set options to create your own effects including an image preloader:
Looped Slider
LoopedSlider is a plugin made for jQuery that solves a simple problem — the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewindâ€� that most other content sliders suffer from:
Coin Slider
Another jQuery image slider with unique transition effects and easy to use and implement and also compatible with most web browsers:
jCoverflip
jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set. Also, drag or click functionality enables to showcase featured content items on demand by the user:
s3Slider jQuery Plugin
s3Slider jQuery plugin is easy to use — first include the jQuery library then include the javascript in the head of the page(s) where you want to use s3Slider:
slideViewer
slideViewer is a lightweight (3.5Kb) jQuery plugin which allows you to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images:
jqGalScroll
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flick smoothly through your photos:
Easy Slider 1.5
One of the easiest jQuery plugins for sliding images and content:
Coda-Slider
Coda Slider is a jQuery content slider with left and right slide navigation along with tab-type slide navigation included:
jQuery Plugin – Feature List
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget:
Moving Boxes
Moving Boxes has been developed by CSS-Tricks — a unique kind of content slider you surely want to check. Why not give it a try now:
Coda-Slider 2.0
An interesting read. Also notice that the slider slides automatically, but will stop when the users clicks on any nav button:
bxSlider
bxSlider is a jQuery content slider and includes an image slideshow:
jQuery Easy Slides
Possibly the easiest among all jQuery plugins to use for making effective slideshows:
Smooth Div Scroll
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps:
Supersized jQuery Plugin
This is a simple full screen background slideshow plugin:
jqFancyTransitions
jqFancyTransitions is an easy-to-use jQuery plugin for displaying your photos in a slideshow along with a couple of fancy transition effects:
Galleria
Galleria is an image gallery framework written in JavaScript. The aim is to simplify the process of creating visually appealing image galleries for the web and mobile devices:
jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player:
jQuery SerialScroll
This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, as well as combined:
Slideshow 2!
Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Try it out:
AnythingSlider jQuery Plugin
As the name already says, you can slide basically anything (images or content, or both) using this jQuery slider plugin:
jQuery Slider Tutorials
Create Featured Content Slider Using jQuery UI
Here you can learn how to create a featured content slider for your website using the jQuery UI library:
Create a Beautiful jQuery Slider tutorial
This tutorial explains how to develop jQuery sliders with image descriptions and name:
Animate Panning Slideshow with jQuery
In this tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides:
Create an Image Rotator with Description (CSS/jQuery)
This tutorial will let you learn how image rotation works and how to create image rotator with CSS and jQuery:
Using the Wonderful jFlow Plugin
A beautiful use of jFlow Plugin has been shown on Nettuts+ network. Check out this tutorial:
Slide Thumbs
In this tutorial it’s explained how to turn old boring image viewer into a nice-looking one with jQuery:
Making A Slick Content Slider
A sleek content slider with the help of jQuery and the MopSlider plugin:
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
There is no need for a database nor a PHP back-end for this gallery. This means that it is really easy to incorporate into an existing site – you just have to change a few lines of html code:
Create a Slick and Accessible Slideshow Using jQuery
A nice tutorial on Six Revisions on how to create a slick content slideshow using jQuery:
Making a Mosaic Slideshow With jQuery & CSS
A very detailed and advanced tutorial on how to create a mosaic slideshow by using CSS and jQuery:
Advanced jQuery background image slideshow
A very well explained tutorial on how to create a background image slideshow:
Automatic Image Slider w/ CSS & jQuery
Soh Tanaka created one of the best image slider tutorials — you must check this one out to learn how to create a beautiful automated image slider using CSS and jQuery:
How to Create a Simple iTunes-like Slider
Take a look at how to create a slider similar to the one used in the iTunes store:
Build a Content Slider with jQuery
A tutorial that is a bit different than the rest: explains how to create an easy-to-implement content slider plugin, allowing multiple instances on a page, allowing users to customize the size, button images, etc. and finally, how to create valid markup:
Create a Custom jQuery Image Gallery with jCarousel
A nice tutorial on creating a jQuery image gallery using jCarousel:
Simple JQuery Image Slide Show with Semi-Transparent Caption
Here you can learn how to create a simple image slide show with a semi-transparent caption with jQuery:
Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider:
Creating a Rotating Billboard System with jQuery and CSS
In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads:
Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin
Here you will need to have some basic XHTML/CSS and JavaScript skills — you can then learn how to use jFlow, a minimalist jQuery plugin to create a content slider:
Content Slider Using CSS and Jquery
In this tutorial you can learn how to create a slider which can be used to slide your content of any website:
Creating a Slick Auto-Playing Featured Content Slider
A nice tutorial on how to create a slick auto-playing featured content slider:
Further Resources
All About jQuery: Plugins, Tutorials and Resources
50 Useful jQuery Plugins to Enhance your Forms
50 Useful JavaScript and jQuery Techniques and Plugins
(ik)
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.
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:
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:
When you’re finished, export the video to QuickTime by going to File → Export:
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.
Simply check the “Streaming/Saving� checkbox, click “Advanced,� and define a suitable location and settings for your video:
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:
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:
There are a lot of presets — iPod, iPad and so on:
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;
I’ve scraped and converted the results, and now I can embed the SlideShare presentation as HTML and images using the converter tool:
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