<!DOCTYPE html>
<html>
<head>
<title>Yote</title>
<script src="/yote/js/jquery-latest.js"></script>
<script src="/yote/js/jquery.cookie.js"></script>
<script src="/yote/js/jquery.base64.min.js"></script>
<script src="/yote/js/json2.js"></script>
<script src="/js/main.js"></script>
<script src="/yote/js/yote.js"></script>
<script src="/yote/js/yote.util.js"></script>
<link href="/yote.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/main.css" rel="stylesheet" type="text/css" media="all" />
<META NAME="Author" CONTENT="Eric Wolf, coyocanid@gmail.com">
<STYLE>
.widget { background-color: rgba( 255,255,255,.2 ); margin-bottom: 10px; padding:5px; }
.c_name { font-style: italic; font-family: sans-serif; font-size: large; }
.c_time { font-family: monospace; text-size: smaller; }
.c_message { font-family: serif; }
.motd { padding : 5px; margin : 5px; border solid 1 px black }
body { margin-top:70px }
.page_panel { width : 800px; background-color: rgb(79, 153, 88); margin: auto; }
.mainpanel { top:0px; width:500px; display:inline-block; }
.chatbar { top:0px; width:200px; display:inline-block; vertical-align:top; margin : 10px; padding : 10px }
.news_time { font-family: monospace;
font-size: small; }
.news_body { font-family: serif; margin-left: 10px; padding-left: 10px; }
.news_header{ font-family: sans-serif;
font-style: italic;
font-size: large; margin-top: 3px; margin-bottom: 3px; }
</STYLE>
<!--
there is a beauty that we experience as kids that only leaves tiny hints of itself when we are older.
it hides in smells and in the whispered wind.
if we are our experiences then we are both sides of them.
-->
<script>
$().ready(function(){
$( '#motd_sec' ).hide();
$.yote.init();
make_menus( '#top_nav' );
var yote_app = $.yote.fetch_app('Yote::Util::MadYote');
var motd = yote_app.get_MOTD();
if( motd ) {
$( '#motd' ).empty().append( motd );
$( '#motd_sec' ).show();
}
var news_blog = yote_app.get_news_blog();
$.yote.util.control_table( {
suppress_table : true,
item : news_blog,
list_name : 'posts',
attachpoint : '#news',
paginate_order : 'reverse',
columns : [
function( item ) {
var dt = new Date( 1000 * item.get_created_on() );
var auth = item.get_author();
return '<DIV><div class="news_header">' + item.get_subject() + '</div>' +
'<div class="news_body">' + item.get_content() + '</div>' +
'<div class="news_time">Posted by ' + auth.get_handle() + ' on ' + dt.toLocaleString() + '</div>' +
'</DIV>';
}
],
plimit : 5,
} );
var page_counter = $.yote.fetch_app('Yote::Util::Counter');
page_counter.increment( 'Main Page',
function( count ) {
$('#counter').empty().append( count );
},
function( err ) {},
1
);
var board = yote_app.get_chat_board();
function make_chat() {
var bf = '<TEXTAREA id="post_out" rows="5" cols="25" placeholder="Message"></TEXTAREA>';
if( ! $.yote.is_logged_in() ) {
bf += '<INPUT TYPE="text" id="post_name" size="8" placeholder="Name">';
}
bf += '<BUTTON type="BUTTON" id="send_msg">Send</BUTTON> <BR>' +
'<div id="chatter_table"></div>';
$.yote.util.button_actions( {
button : '#send_sug',
texts : [ '#suggestions' ],
action : function() {
var sug = $( '#suggestions' ).val();
yote_app.suggestion_box( sug );
$( '#suggestion_result' ).empty().append( "Sent '" + sug + "'" );
},
} );
$( '#chatter' ).empty().append( bf );
var ct = $.yote.util.control_table( {
suppress_table : true,
item : board,
list_name : 'posts',
attachpoint : '#chatter_table',
columns : [
function( row ) {
var when = new Date( row.get( 2 ) * 1000 );
return '<DIV><span class="c_name">' + row.get( 0 ) + '</span> ' +
'<span class="c_message">' + row.get( 1 ) + '</span> ' +
'<span class="c_time">' + when.toLocaleTimeString() + '</span></DIV>';
}
],
plimit : 8
} );
if( $.yote.is_logged_in() ) {
$.yote.util.button_actions( {
button : '#send_msg',
texts : [ '#post_out' ],
action : function() {
board.post( $( '#post_out' ).val() );
ct.refresh();
$( '#post_out' ).focus();
}
} );
}
else {
$.yote.util.button_actions( {
button : '#send_msg',
texts : [ '#post_out', '#post_name' ],
cleanup_exempt : { '#post_name' : 1 },
action : function() {
board.post( [ $( '#post_out' ).val(), $( '#post_name' ).val() ] );
ct.refresh();
$( '#post_out' ).focus();
}
} );
}
} //make_chat
attach_login( {
attachpoint : '#logged_in_status',
message_attachpoint : '#msg_div',
after_login : make_chat,
after_logout : make_chat
} );
});
</script>
</head>
<BODY>
<DIV class="header">
<A href="/index.html" style="display:block">
<img height="70px" width="151px" src="yotelogo.png">
</A>
<UL id="top_nav" class="nav"></UL>
<DIV class="login logged_in" id="logged_in_status"></DIV>
<DIV id="msg_div"></DIV>
</DIV>
<DIV class="page_panel">
<DIV class="mainpanel">
<SECTION>
<DIV class="page-header">
<H1>What is Yote</H1>
</DIV>
<P>
Yote is a web application server written in perl and javascript.
It is designed for the rapid development of web applications.
It is an open source project and is available to all.
</P>
<P>
It was created by <a href="mailto:coyocanid@gmail.com">Eric Wolf</A>.
An example of a Yote app is the <A href="/gru/index.html">Animal Learning Game</A>
</P>
<P>
The News section of this page uses Yote::Util::Blog which is no more than about 50 lines of perl code
when you include the helper class of Yote::Util::BlogPost.
The javascript code to add entries and display the blog is about 20 lines of javascript code.
Take a look on the <A href="samples.html">samples</A> page.
</P>
<!--
<P>
Yote connects javascript to Perl.
Methods you write in Perl on the server automatically show up on the client.
Yote security makes sure that clients only see objects and methods intended for them.
</P>
<P>
An example of a Yote app is the <A href="/gru/index.html">Animal Learning Game</A>
</P>
-->
</SECTION>
<SECTION>
<DIV class="page-header">
<H2>What Yote Does</H2>
</DIV>
<UL>
<LI>Yote connects client javascript to server perl</LI>
<LI>Automatically saves objects in a data store</LI>
<LI>Controls what methods and data a client may see and use</LI>
<LI>Provides a library of utility objects and UI widgets</LI>
<LI>Serves web content</LI>
</UL>
</section>
<!--
<SECTION>
<DIV class="page-header">
<H2>Yote is for those who</H2>
</DIV>
<UL>
<LI>Don't have the time to use schemas</LI>
<LI>Want to just code the business logic</LI>
<LI>Have to keep pace with fickle design changes</LI>
</UL>
</section>
<SECTION>
<DIV class="page-header">
<H2>Why Yote makes you more productive</H2>
</DIV>
<ul>
<LI><strong>MVC :</strong> the model is created transparently and has much less an overt footprint in the code. This means you mainly focus on the controller and model.</LI>
<LI><strong>Schema gone :</strong> you change data structures on the fly and on a case by case basis.</LI>
<LI><strong>Synchronous :</strong> the javascript calls are synchronous by default, but can be called asynchronous as well. The code then flows from one statement to the next without needing to chain lots of asycnronous calls.</LI>
</ul>
</SECTION>
<SECTION id="contact">
<DIV class="page-header">
<H1>Contacting the programmer</H1>
</DIV>
<p>
My name is Eric Wolf and I've been working on Yote for a good three years, on and off, when I have time.
</p><p>
I can be reached at <a href="mailto:coyocanid@gmail.com">coyocanid@gmail.com</a>.
</p><p>
Yes, I will help with any questions or installation issues.
</p>
</SECTION>
<SECTION id="motd_sec">
<DIV class="page-header">
<H1>Currently Ongoing</H1>
</DIV>
<p id="motd"></p>
</SECTION>
-->
<SECTION>
<DIV class="page-header">
<H1>News</H1>
</DIV>
<p id="news"></p>
</SECTION>
</DIV>
<DIV class="chatbar">
<!--
<DIV id="search_box" class="widget">
<INPUT TYPE="text" PLACEHOLDER="Search" id="search_txt"> <BUTTON type="Button">Search</BUTTON>
</DIV>
-->
<DIV class="widget">
<DIV id="suggestion_box">
<TEXTAREA id="suggestions" placeholder="Suggestion Box"></TEXTAREA>
<BUTTON id="send_sug">Sent</BUTTON>
</DIV>
<DIV id="suggestion_result"></DIV>
</DIV>
<DIV class="widget">
Yote Chat
<DIV id="post_box"></DIV>
<DIV id="chatter"></DIV>
</DIV>
</DIV>
</DIV>
<footer>
This page has been viewed <span id="counter"></span> times.
</footer>
<script src="/js/local.js"></script>
</body>
</html>