Looking for some directional help, or to even see if this is possible. My client is reworking her site and hired me for my graphic design background, I'm handy with HTML and CSS, I can make sense of JavaScript but I wouldn't say I have strong skills there. She wants a book with realistic page flip effects (plenty of readily avail script for the page flip but also wants the book cover flip effect as well). I found exactly what she wants at
http://20thingsilearned.com if you want to get the idea. It's open source, I've done custom artwork and can get the book and credits pages to load, but the sub chapters use Java to store them to the Google datastore, her server does not support Java and she's paid a year in advance so no chance asking her to move to another company!
The important part is the source for the project involves taking the pages stored as stubs in .html format, then overlaying them on the pages instead of the typical <div> method. This is vital because the <div> method can't be indexed in search engines, and does not support clickable links. Ignoring the multi-language support on the 20 things site (only doing English), is there a way to have a js script move the .html to an SQL database instead of using Java to store them in the datastore? The other reason this is important, because I can easily do the old fashioned .html file for each page instead of using the PHP engine, but every time you would try to go to another chapter, it would have to reload the book cover animations. Smooth transition from one section to the next is paramount. The 20 things version avoids this by loading all the .html files in cache, and from what I understand just changes the z-index to bring the desired page to the front, so it appears you are only accessing one big html page when you are just seamlessly shifting one html page to the top and another to the bottom, invisible from the observers perspective.
The PHP calls the following Java .class files, the first 3 collect the data from the .html files, and objectify serializes the data, stores to the datastore, and readies it for callback from the PHP
import com.fi.twentythings.Article;
import com.fi.twentythings.Locale;
import com.fi.twentythings.Page;
import com.googlecode.objectify.Objectify;
import com.googlecode.objectify.ObjectifyService;
Here's how the page parsing is setup:
PHP Code:
function parse_article_pages()
{
global $pages, $parsedPages, $ofy, $pageclass, $articleclass, $langcode;
$querypages = $ofy->query($pageclass)->filter('locale',$langcode)->list(); //->filter('stub', $currentArticle);
$i=1;
foreach ($querypages as $page) { //as $key => $value
if($page->getPageNumber()=='1') {
$i = 1;
$pagearticleparent = $ofy->query($articleclass)->filter('locale', $langcode)->filter('stub', $page->getStub())->list()->get(0);
}
$pagetitle = $pagearticleparent->getTitle();
$stub = $page->getStub();
$title = $pagearticleparent->getTitle();
$subtitle = $pagearticleparent->getSubtitle();
$template = $page->getTemplate();
$outputpage = "<section class=\"".$template." title-".$stub." page-".$i."\">";
$outputpage .= "<div class=\"page\">";
$contents = trim($page->getContent());
$filename = 'locale/'.$page->getLocale().'/pages/'.$stub.'-'.$i.'.html';
// Get the page template name for the page
$pageTemplate = $templates[$i-1];
$contents = trim( file_get_contents($filename) );
// Replace all dynamic variables in the page contents
$contents = preg_replace( '/{TITLE}/is', $title, $contents );
$contents = preg_replace( '/{SUBTITLE}/is', $subtitle, $contents );
$outputpage .= $contents;
// Close the wrapper element for the page
$outputpage .= "</div>";
$outputpage .= "</section>";
$parsedPages[ 'pages/'.$stub.'-'.$i.'.html' ] = $outputpage;
$i++;
}
}
Please tell me I can script this, and bypass Java! My plan B is horrid by comparison (still good, but a poor substitution).
Edit: to avoid confusion, the query is run by JQuery v1.4.2.