Sunday, January 4, 2009

How to create an awesome eBook Template using Word or Apple Pages

Today I received some requests about The Woork Handbook template I published yesterday. Some readers asked to me to distribute that template for their eBooks. So in this post I want to illustrate some guidelines to create an awesome eBook template, quickly and in few steps.

I prepared the template which you can download (for Apple Pages and Microsoft Word) and reuse it for your eBooks (I used Apple pages to write the eBook!).

Download Apple Pages template Download Microsoft Word template


eBook Format
You can print the eBook on A4 format page (2 pages for each facade). This is the screenshot:




Document structure
The document is divided in sections. Each section is a chapter. Use "section break" to separate each chapter in this way:



Adding a section break:

- Apple Pages: Insert > Section Break
- Microsoft Word: Insert > Break > Section break (next page)


Page header
This is a not necessary element but i like have a short description in the header of the my pages. It's a simple text on top of your page with above a line which separete the header from the rest of the page:




In general "page header" isn't placed on the first page of the chapter:

- Apple Pages: select layout button on the inspector and flag the option: First Page is different.



- Microsoft Word: double click on the page header and select different first page from the header/footer toolbar.


Chapter structure using document styles
When you work with a text document (using Word, Apple Pages, OpenOffice...), a very good practice is to define your custom styles for the elements of your pages. In this way, every time you decide to modify the look of an element (for example "chapter title"), it will be update automatically in all elements of your document which use that style. For example take a look at the following picture which represents a generic chapter structure:



We have the following elements with related styles:

Chapter title -> Heading 1
Article title -> Heading 2
Paragraph header -> Sub header paragraph
Normal text -> Body
Code box -> Code
Footnotes -> Notes
Article footer -> Small header + small body

You can define your custom style in this way:

- Apple Pages: View > Show Style Draver and then selecting a style and modifying style properties, or creating a new style.
- Microsoft Word: Format > Style and then selecting a style and modifying style properties, or creating a new style.

Note: I used Qlassik font for the title of chapters and articles. You can download it here. In this version of template I used Arial in case you don't have Qlassik font.


Table of contents
Adding a TOC it's very simple:

- Apple Pages: Insert > Table of content.
- Microsoft Word: Insert > Document element > Table of content

Your TOC will be updated automatically every time you add a new content in your document but (this is really important!) you have to use style elements created for the chapter title and article title (Heading 1 and Heading 2).

It's all! I hope this template can help you to prepare quickly your eBook.

Every suggestion is appreciated :)

Note: I used Apple Pages to create my eBook, and I simply converted Pages template for Word. I experienced there are some litte problems with formatting which you convert a document in Word from Apple Pages... tell me if you have them!

Saturday, January 3, 2009

The Woork Handbook

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design... directly from Woork!

Ok friends... finally a first preview of "The Woork Handbook" is ready to be released. This book is a miscellanea of articles I wrote on my blog in the past year. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and I received a lot of requests to distribute a printable version of its contents. In the past days I worked hard to prepare a first version of this handbook and distribute it for free.





The book contains articles with code sections, images, illustrations and links to original contents on woork. How I said isn't a structured book! but a printable version of Woork!

The Woork Handbook has been selected on Scribd as a featured document.


Featured Documents are documents that our editors have deemed to be high quality, and adds significant value to Scribd's collection of documents.


Screenshots
These are some screenshots of the book:



1. Book cover and presentation



2. Internal pages



3. Internal pages

Please, take a mind these points:

- english is not my primary language;
- all content it’s a brutal copy and paste from my blog;
- I’ll update periodically this book with new content.


Read this eBook on-line


The Woork Handbook

I hope you’ll find this handbook (with all his limits...) useful. You can print it on A4 format page (2 pages for each facade).

Every suggestions will be appreaciated.

All the best.

Nice RSS Feed Icons for free

Here are some websites with nice Icon´s RSS Feed (they are free of copyright): RSS Feed Icon Photoshop ShapesRSS Buttons by gojol23RSS Icon by JackieW Hat RSS Icon by LoafNinja

5 Optimal online Photo Editors you may try

Are you looking for an optimal on-line photo editor, free and with features similar to your desktop applications? Take a look at this list of five editors you may absolutely to try!


1. Photoshop Express
Photoshop Express is absolutely my preferred online photo editor. Probably it's the best on-line photo editor alternative to desktop products. Flash 10 based interface provides an exceptional user experience, simple to use and with a fluid workflow.



You can crop, rotate, resize, correct, modify exposure and saturation, remove red eyes and a lot of other action from your photos and any change you made on your photo is reversible and you can always go back to your original photo. Basic account also provides 2GB of free storage.

Photoshop Express


2. Pixlr
Pixlr is an "open-and-go" on-line photo editor. Open the page, open your photos and make all changes you want! No registration is required and with a familiar Photoshop interfaces, with advanced features (such as lasso, brush, clone stamp, blur, sharpen, wand tool) Pixlr is one of the best online Photo Editor actually in circulation.



You can use multiple layers, a lot of filters and use all fonts you have in your computer. Flash 10 web-interface provides a great user experience with stunning visual effects.

Pixlr


3.Slashup
Slashup it's a Flash-based on-line clone of Photoshop desktop program, with a lot of interesting features to edit your photo online. If you are a Photoshop or Gimp user you'll find very simple to use and with a "familiar" interface.



You can manage multiple file with a windowed environment, multiple layers, use filters and custom brushes, adding text and share your photo with other web services. You can also save your images in JPEG and PNG format selecting the more appropriated compression level.

Slashup


4. Picnik
Picnik... if you try it, you'll love it! This web application is simple to use, with a clear Ajax based interface, fast and responsive and doesn't require registration to use it.



When you upload a photo you can modify the exposure, contrast, saturation, apply red eyes remover and other effects, add text (there are some interesting fonts to use), save or share your photos on Flickr,Facebook, MySpace, Picasa and on other photo sharing web services.

Picnik


5. FlauntR
FlauntR is another high-quality online photo editor which uses a powerful Flash interface to manage and retouch your photos with a professional quality. With flauntR you can create widgets and slideshows as share photos to social networking sites.



Flauntr supports dozens of editing effects, nice fonts and custom shapes to enrich your photos and un unlimited storage space.

FlauntR

Do you have other links? Add a comment!

Thursday, January 1, 2009

Fonts for web and graphic designers

This page contains a collection of my favorite free fonts for web and graphic designers. Take a look at this list, choose your font and click above an image to download it. If you want to suggest other interesting fonts or fonts galleries please add them here.




 
10 Beautiful and free must have Serif Fonts10 Awesome typewriter fonts for web designers10 Interesting fonts for web designers10 Delicious Free Fonts with commercial-use license10 Beautiful and free fonts for web designers5 Beautiful pen-style fonts10 Fonts to design original logos10 Handwritten fonts you can't miss

Useful lists for web designers, programmers and bloggers

This page contains a collection of some interesting lists which contain useful resources for web designers, programmers and bloggers. If you want to add your list, please add a comment!

Designers

- 10 Useful resources for web designers and developers
- Useful Adobe Flash frameworks and graphical engines for developers
- Useful scripts and resources Facebook-inspired
- Useful scripts to plot charts in web pages
- 10 Free CAPTCHA scripts and services for websites
- Free resources for quickly developing AJAX applications
- 6 Interesting online presentations for web developers
- Free spell checkers for HTML Forms
- Interesting Resources to learn Object Oriented Design
- Useful Ajax Auto Suggest scripts collection
- Interesting html FORM Validators
- Best Rich Text Editors ready to use in web projects
- File uploaders collection
- Best Image Croppers ready to use
- Beautiful datepickers and calendars
- 20 Great PHP framework for developers
- Resources and tutorials for developing stunning web sites
- 10 Tutorials to learn Scriptaculous
- 10 Useful articles about Database design


Various

- 8 Interesting Adobe AIR applications for web lovers
- 10 Interesting social applications for your Google Phone
- 30 Interesting Twitter services and applications
- 5 Optimal online Photo Editors
- 5 Awesome free web hosting services
- Free tools to create your own social network Facebook-like

Nice vertical menu with motion and opacity effect

In this tutorial I explain how to design a vertical menu which use motion and change opacity effect. I wrote this post to show a better use of elastic effect which I illustrated in my latest post.

The effect I want to realize is the following. I have a vertical menu with some links. On "mouse over" the select link goes to the right with an animated elastic effect and change its opacity. When you release the element, it goes in its initial position with original opacity value. The result is something like this:



Take a look at the live preview to see this script in action.


Download source code Live Preview


HTML code
HTML code is very simple. We have a list (<ul>) with some <li> elements with a progressive ID (l1, l2, l3, l4...):

<ul id="menu">
<li id="l1"><a href="#">About</a></li>
<li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
</ul>


CSS code
I used this simple CSS code to set the look of links but you can customize it how your prefer:

#menu li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding
:4px;
background
:#DEDEDE;
text-decoration:none;
}

JavaScript code
In order to obtain our effects (elastic motion + change opacity) I used MooTools framework and some lines of Js code. In the <head> tag of the page add a link to MooTools:

<script type="text/javascript" src="mootools.svn.js"> </script>


Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):


<script type="text/javascript">
window.addEvent('domready', function(){
$('#container div').each(function(item){
var o = item.id

// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});

// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
});
})
});
</script>

It's all! Download the source code and send your suggests!

Download source code Live Preview

Related Post
Super elastic effect to design high impact web menu