I have begun the tutorials for PHP, after Aaron told me that it will be more useful than Javascript in terms of learning how to create a spellchecker. I hope to have that done by next week.

Here are the links to my new layouts:
Browse: http://www.jervo.com/basecamp/digitalmedia2009/sp2009/browse%20copy-1.jpg
Help: http://www.jervo.com/basecamp/digitalmedia2009/sp2009/help%20copy-1.jpg
Search: http://www.jervo.com/basecamp/digitalmedia2009/sp2009/search%20copy-1.jpg
Showcase: http://www.jervo.com/basecamp/digitalmedia2009/sp2009/showcase%20copy-1.jpg

Happy Valentine’s Day!

Login Page: http://www.christianmhahn.com/derivativ/wp-content/uploads/2009/01/graphicstandard.doc

Home Page: http://www.christianmhahn.com/derivativ/wp-content/uploads/2009/01/graphicstandard_page.doc

In addition I have begun tutorials on Javascript using those found on Tizag.com on Aaron’s recommendation. Any further recommendations from the professors for Java and PHP would be greatly appreciated. Tutorials for this week took about 1 hour, not much, but will be adding more in as the next couple of weeks progress.

Next week I will be working on the graphics standard for the profile and main profile pages, designing assets and their respective states, and brushing up on Java

derivativ login

I’m going to use this as a template for all subsequent pages; just replacing stuff in the content area, sub header and exchanging mini login with the profile info.

For next week I’ll split up the css a little, for example the mini login doesn’t have to be on every page, so I’ll put it’s css in a different file. Also I’ll start working on the other pages’ html/css and integrating them with javascript and such.

-Pavel

Here are links to my layouts:
http://www.jervo.com/basecamp/digitalmedia2009/sp2009/homepage%20copy.jpg
http://www.jervo.com/basecamp/digitalmedia2009/sp2009/minilogin%20copy.jpg

This upcoming week I am designing the profile and main profile pages, and will look for tutorials on javascript.

Troy finally got back to with tons of helpful information. He must have sent me at least 8 websites based on color theory and coloring resources for web based applications. Together with These references and Adobe illustrator, I was able to finalize a color palette that the entire group could agree on. I also took the newly designed color palette to create a brand new Vector based Derivativ logo for all future applications of the site. With our new mandatory meetings, I hope my group will stop with the excuses and finally get to meetings, so we can start functioning as a team and get cracking on our baby.

Overall I would say I put about 3.5 hours of work into this week’s assignment.

Links to my work:

Final Color Palette:
http://www.jervo.com/basecamp/digitalmedia2009/sp2009/final_swatches.png

New Derivativ logo:
http://www.jervo.com/basecamp/digitalmedia2009/sp2009/final_logo.png

Over the next few weeks, I am going to get in touch with some PHP tutorials to make myself more useful for the coming coding of the website. In the meantime I will work on the final graphical assets for the website, and work on finding information for a profanity blocker in the text based applications.

This week my assigned tasks were to build functions and methods for:

- The PHP/MySQL end of text submitting, which will work in conjuction with Aaron’s demo.
[about 2 hours straitening things up]

- The PHP/MySQL end of allowing users to upload and save Imagery
[4 hours]

- Connecting User information to submissions
[2 hours]

All of these have been implemented as part of my Alpha demo page:
http://derivativ.net/alpha/index.php

also, all but the profile tethering aspect can still be viewed here:
http://aarongrando.com/derivativ/alpha

In addition to my assigned tasks, I took the responsibility of creating a lists of assets which must be comiled by the group for the site: most are images, some are more CSS or code based snippets or choices. We devided them up at our meeting on thursday:
asset-list
[I spend 1.5 hours planing the original list]

This week I tackle exact the method that will be used to time “branch life-span” from the root, and also how to combine posts once a “branch” has been decided the winner. I will also begin work ok the assets assigned me in my list

- Christian

I found it interesting that this was more involved than I thought, and learned something I never knew before this about interacting with scrolling ’s.

Here’s the demo:
http://aarongrando.com/derivativ/javascript/story_submit.html

The function below runs a chain of actions that looks like this:
- Output Original Story Text
- Hide Story Entry Box
- Wait for click on “Add Entry +” button
- On click, transition animation to open up Add Entry box.
(Presumably this is where the user puts text into text area — there’s a catch in the code if they do not, too)
- Wait for another click to confirm entered text.
- Append story addition entry onto Original story.
- Put the new full story (with some formatting) where the story is.
- Scroll the Window down to the new content (at the bottom) — this was the hardest part
- Animate back up the add entry text area.
- Clear the text area
- Wait for click on “Add Entry +” button…

Here’s the code (not sure how well this comment is going to format that, sorry):
$(function(){

var story = “The first bits of the story are loaded out of the database with PHP and displayed, but they’re also stored in the browser’s buffer variables. After you hit the ‘Add Entry’ button below, the only text seen is coming straight out of the browser’s buffer.Cool things to check out: Sliding / Fading animation on button click.Alert on submit with no characters.”;
document.getElementById(’storyText’).innerHTML = story;
$(”.addEntry1″).hide();

function flashAlert(cls){
$(cls).animate({
backgroundColor: ‘#ff9988′
}, 250).animate({
backgroundColor: ‘#fff’
}, 1500);
};

$(’.bot’).click(function(e){
e.preventDefault();
if ($(”.addEntry1″).is(”:hidden”)) {
$(”.addEntry1″).slideDown(”slow”).animate({
opacity: 1
});
} else {
var inputText = document.getElementById(’inputText’).value;
if (inputText.length > 0) {
story = ” + story + ” + inputText + ‘‘;
document.getElementById(’storyText’).innerHTML = story;
//$(’#box’).animate({scrollTop: $(’#box > .inner’).outerHeight()});
$(’#box’).animate({scrollTop: $(’#box’)[0].scrollHeight});
$(”.addEntry1″).animate({
opacity: 0
}).slideUp(”slow”);
document.getElementById(’inputText’).value = ”;
} else {
flashAlert(’.inputBox’);
}
}
});
});

——————

The code for the scrolling box was quite difficult to figure out, but eventually it came around.
Coding the whole thing took a while (4 hours or so last night) with all the difficulty with the scrolling div.

Unfortunately, the code I got finally got working is incompatible with the Interface plugin for jQuery I had used for the Alert fade in the toolbox. For now, I’m going to leave the plugin out, but if we really need the alert fade I may put it back in. Alternatively, I could just vary the opacity of a background image of the desired color. We’ll see.

Next week I’m working on taking the code I’ve developed here and integrating it into the actual site’s pages which are being coded by Pavel. Additionally I’ll be tackling some graphical assets - a set of icons for the site, and assisting Pavel with working out the CSS standards to be compatible with the javascript (specifically, the jQuery).

-pockets