Children's Picture Bible and My Life: fixed layout

레이블이 fixed layout인 게시물을 표시합니다. 모든 게시물 표시

2013년 7월 17일 수요일

#1 The Story of Eden

http://www.amazon.com/Story-Eden-GENESIS-Loves-ebook/dp/B00DHY2QTO/ref=sr_1_5?s=books&ie=UTF8&qid=1374081147&sr=1-5

2013년 7월 7일 일요일

Kindle Comic Creator is a free tool for authors and publishers to turn their comics, graphic novels and manga into Kindle books. Kindle Comic Creator makes it easy for authors and publishers to import artwork, create their preferred customer reading experience and preview how their book will look on Kindle devices. Once satisfied with their Kindle book, authors can publish to Kindle and share their story with millions of Amazon customers worldwide.

Kindle Comic Creator makes it fast and easy to create a guided navigation experience with Kindle Panel Views. Kindle Comic Creator automatically detects and recommends Kindle Panel View placement in your book. Kindle Comic Creator also makes it simple to create books with double page spread, facing pages and right-to-left page turns.

Kindle Comic Creator accepts the most prevalent graphic file types, so authors are free to create art in their preferred design tools. Kindle Comic Creator can import single or multi-page images in jpg, pdf, tiff, png and ppm formats.

Kindle Comic Creator also makes it quick to preview how the content will look across Kindle devices. With an integrated preview feature, authors can validate that their books look beautiful on Kindle Fire tablets and Kindle eInk readers.

Goooooooooooooooooood !!!!

http://www.amazon.com/gp/feature.html?docId=1001103761

2013년 6월 12일 수요일

The Amazon mobi file sources for Fixed Layout Error!

Fixed Layout을 위한 아마존 mobi파일 소스 에러 !

The Amazon mobi file sources for Fixed Layout Error !

킨들에 등록하고 나면 이상하게도 이런 에러가 생긴다.

처음에 cover가 나오고

그 다음에 원래 크기가 아닌 늘어난 사이즈로 한장 더 보인다는거~

왜 이런지 누구 아는 사람 없나요?

Once you have registered on Kindle, this error occurs.

The cover page comes out first,

then there's another cover on the next page

but it's stretched out than the original size.

Does anybody know why?

2013년 6월 11일 화요일

The Amazon mobi file sources for Fixed Layout (Fixed Layout을 위한 아마존 mobi파일 소스)

Fixed Layout을 위한 아마존 mobi파일 소스입니다.
아래와 같이 일단 폴더와 파일명을 만드세요.
폴더는 새폴더를 만들어서 이름을 바꾸면 되겠죠?
파일 또한 새파일 만들어서 이름을 아래와 같이 써서(확장자명도 함께)
저장해주면 됩니다.
참고로 EditPlus3을 쓰면 편리하답니다.

This is the Amazon mobi file sources for Fixed Layout.

Create one folder and named the file as follows.

Once you create a new folder then rename the folder.

Create a new file and change the name of that file as follows (with the extension filename) and save it.

Note that using EditPlus3 is more convenience.

css폴더에서는 폰트타입을 결정하는데 저는 이미지만 들어가므로 패쓰~
그리고 images폴더에는 그림을 넣어 주시면 되는데요.
여기서 중요한 것은 가로가 1280픽셀이어야 한다는점!
그래야 새로나온 킨들기기 등에 더 잘보인다네요.

The css folder to determine the font type, but I only use the image.

So I'm going to skip this part.

Put the picture in the images folder.

The important thing is, it must be 1280 horizontal pixels!

So it'll look better for new Kindle devices.

그럼 css폴더를 열어볼까요?

아래와 같이 stylesheet.css 파일이 있네요.

So let's open the css folder?

There's a stylesheet.css file as shown below.

파일을 열면 아래의 소스를 복사해서 넣어줍니다.

When you open the file then copy and paste the sources below.

/* CSS Reset

Code licensed under the BSD License:

http://developer.yahoo.com/yui/license.html

version: 3.3.0

build: 3167

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* Full Screen Page Layout */

div.fs {

height: 800px;

width: 1280px;

}

/* img-이미지의 크기 여백 등을 규정함 */

It determines the size of the image or the margins.

img {

position: absolute;

width: 1280px;

height: 800px;

margin: 0;

top: 0;

left: 0;

}

/* 여기서부터 각 페이지의 특정 레이아웃을 위한 클래스들입니다. *//////////////////////////////////////

From here, this is the classes for specific layout of each page.

/* coverpage */

.page001 {

height:800px;

width: 1280px;

overflow: hidden;

}

/* 폰트 */ Font

h1 {

font-size: 30px;

}

여기까지입니다.

그럼 이젠 content.opt를 열어보겠습니다.

That's it for now.

So now, let's open the content.opt.

<?xml version="1.0" encoding="UTF-8"?>

<dc-metadata xmlns:dc="http://purl.org/metadata/dublin_core" xmlns:oebpackage="http://openbook.org/namespaces/oeb-package/1.0/">

<dc:title>The Story Of Isaac</dc:title>

<dc:creator>Choi Young Soon</dc:creator>

<dc:language>en</dc:language>

<dc:identifier id="bookid">9788997978007</dc:identifier>

</dc-metadata>

<x-metadata>

<EmbeddedCover>images/img01-00.jpg</EmbeddedCover>

</x-metadata>

</metadata>

</spine>

<guide>

</guide>

</package>

대충 감이 오시나요? Can you get it roughly?

<meta name="orientation-lock" content="landscape"/>은

항상 가로로 그림책이 보이게 하라는 내용이구요.
This is to the picture book always shows horizontally.

<meta name="original-resolution" content="1280x800"/>은

이미지 사이즈 입니다.
The Image size.

그럼 이제 file01-00.xhtml을 열어보겠습니다.
Now, let's open file01-00.xhtml.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>The Story Of Isaac</title>

</head>

<body>

</div>

</body>

</html>

별거 없지요? 파일명과 사이즈를 적어주면 됩니다.

나머지 file01-01.xhtml 부터 file08-01.xhtml도 마찬가지입니다.
Nothing special. Just write down the file name and size sufficiently.

The rest is the same for the file01-01.xhtml to file08-01.xhtml.

이제 toc.ncx를 열어보겠습니다.
Now, let's open the toc.ncx.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">

<head>

</head>

<text>The Story Of Isaac</text>

</docTitle>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navLabel>

</navPoint>

</navMap>

</ncx>

파일명만 적으면 되는군요.

간단하지요?

이 간단한 게 안되서 힘들여 한 일인이었습니다.

다음에는 이렇게 만든 파일을 아마존에 등록하기 위한 mobi파일로

변환하는 과정을 알아보도록 하겠습니다.

You only need to name the file.

Simple, right?

It turns out so easy but I've been go through lots of troubles.

Next time, let's take a look at the process of converting this file to mobi file for registration in the Amazon.com.

2013년 6월 5일 수요일

Fixed Layout for picture books on Amazon bookstore 그림책을 위한 고정레이아웃(Fixed Layout)에 대하여

먼저 <This is epub for ibooks>의 저자 "유찬웅"선생님께 감사를 드립니다.
고정레이아웃이 뭔지도 모르고 있을 때 결정적인 도움이 되었던 분입니다.
처음에 아래 그림처럼 되어 너무 힘들었습니다.
맨 밑의 그림처럼 한 화면에 그림이 꽉차야 하는데 미리보기처럼 보이니 말이죠.
관련 카페에 가입해서 물어보니 검색해보란 답변만 하더군요.
어이가 없었죠. 검색도 안하고 물어본게 아닌데 말이죠.
고민하던차 어머니께서 저자에게 한번 물어보라고 해서 이메일을 보냈더니
놀랍게도 답변을 주셨습니다.
"어린이 동화책, 특히 그림 중심의 책을 위해서 애플이 제공하고 있는 포맷이 있습니다.
Fixed layout 이라는 형식을 통하여 전체 그림(이미지)을 하나의 페이지에
보여줄 수 있습니다. 일러스트 북에 가장 적합한 형식입니다." 라구요.
그래서 구글에 Fixed layout 이라고 검색했더니 내용부터 예제 소스까지
얻을 수 있었습니다.
혹 영어가 안 되시는 분은 네이버에서 "Qtranslate" 다운받아 쓰세요.
번역프로그램으로 최고에요.
저도 이게 없었으면 못했을 겁니다.^^
그럼 아마존에도 Fixed layout이 있을까요?
네~ 있습니다.
오늘은 감사인사 정도로만 하구요,
다음에는 epub의 Fixed layout 샘플과 아마존의 Fixed layout 샘플을 공유하고자 합니다.

First of all, I would like to thank Mr. Yu Chan Ung, the author of <This is epub for ibooks>.
He's been great help when I didn't even know what is fixed layout.
At the beginning, I was struggling so much because the picture's layout didn't show it properly like the photo below.
It suppose to be look like the one at the bottom but it appears like a thumbnail.
So I joined related internet group to ask for an answer, but they just told me to "google".
I was stunned! Of course, I didn't ask for the answer without any research.
When I was depressed, my mother-she's the author of my book-told me to send an e-mail to the author, Mr. Yu Chan Ung. So I did and surprisingly, I've got the answer from him.
He said, "The Apple provides special format for the children's picture book. Through the 'Fixed layout' form, the whole picture (image) will show properly on a single page and that's the best format for the illustrated picture book."
So I searched 'Fixed layout' in google.
I was able to get all the informations that I needed and even the content sources.
If you're not very good in English, download "Qtranslate" from the "Naver".
It's the best translation program.
I'm sure I would have done without it.
Then, is there 'Fixed layout' function in Amazon?
Yes, there is!

Today, I just wanted to say "Thank you!" to Mr. Yu Chan Ung,
and next time, I would like to share the samples of 'epub Fixed layout' and 'Fixed layout for the Amazon'.