DS-Accordion Widget Porting SOP
1. start the project with two folders:
a. target folder, and
b. spry_example (such as livetutor_template) folder.
2. copy all spry_example files to the target folder;
2.1 index-1.html for accordion-ds widget example
2.2 index-2.html for sliding panel widget example
3. rearrange the target files as the structure inside the spry_example folder:
3.1 place all html files on top level, and
3.2 sort the rest of files into css, images, js, podcast, and xml folders.
* if the original files were moved to a different directory, make sure to update all references inside the file.
4. copy the code line 41-67 from old index-1.html to new index-1.html
line 41:
line 42: < href="css/spry_style.css" rel="stylesheet" type="text/css">
...
line 67: < /style>
line 68:
line 69:
5. copy and insert the Accordion Widget, from old index-1.html to new index-1.html
line 91: < id="Accordion1" class="Accordion" tabindex="0">
...
line 132: < /div>
6. copy the following files from the example folder to the target folder:
6.1 spry_example/xml/ to target/xml/
6.2 spry_example/images/4xml/ to target/images/4xml/
6.3 spry_example/images/4thumbs/ to target/images/4thumbs/
7. follow the Lynda DWCS3 Beyond 3-8 to structure the div for both Data Set and Accordion Widget.
(a) select the outer most tag covers the outer most area that the dataset control is to be placed.
(b) insert the layout div tag, as id="ds_control",
(c) click on "New CSS",
(d) define in the spry_style.css, and
(e) edit the appropriate width property, inside the category box,
(f) do the same for "widget_display", as in step b to step e
8. follow the LDWCS3B 5-2 to 5-5,
9. Check the SpryAssets folder, make sure all files are accounted for,
**sometimes DWCS3 DOES NOT copy all the necessary files to the SpryAssets folder
10. preview to make sure all previous steps are done correctly
11. add effects to the div tag that you like, by following the LDWCS3B 5-11 for effects
SOP for porting sliding panel widget
1. copy the following from index-2.html to index-2.html
< id="panelContainer"> and <div id="panelContainer">
.....
< /div>
2. change the inline style css:
#content #thumb
to
#what_ever_is_on_the_outer_div #thumb
3. copy the following
< id="thumbs">
.... < /div>
< id="panelContainer">
....< /div> and
< class="clearfloat">
< language="javascript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("detailSlide1", {duration:500, fps:80});
< /script>
to index-2.html
Saturday, July 19, 2008
Thursday, July 17, 2008
CRE Loaded White Label
The White Label packages are specifically designed for web professionals (designers, hosting firms, web administrators, etc.) who intend to private label the application for internal use or redistribution. CRE Loaded v6.2.06 Pro B2B White Label provides a convenient one-file configuration for simple relabeling as well as instructions for more complete rebranding. This bundle includes both installation and upgrade packages. Now includes eBook manual with each purchase, and information on how One can customize the version for their own White Label distribution. Homepage: http://www.creloaded.comDownload
Cre-Loaded v6.2.06 B2B Pro White Label
Pro B2B White Label Patch 10
Pro B2B White Label Patch 11
User Guide
Installing templates
Copy and paste the templates to /template directory and turn it on. Yes, that easy.
You may turn on/off the template, or the left and/or right column from Design Control.
theme023/13951
theme085/16867
theme095/17381
delta-972/11796
svelte-140/11445
Cre-Loaded v6.2.06 B2B Pro White Label
Pro B2B White Label Patch 10
Pro B2B White Label Patch 11
User Guide
Installing templates
Copy and paste the templates to /template directory and turn it on. Yes, that easy.
You may turn on/off the template, or the left and/or right column from Design Control.
theme023/13951
theme085/16867
theme095/17381
delta-972/11796
svelte-140/11445
Online Finance
Billing/Invoice
blinksale 76,350 (Alexa Ranking 7-17-08)
simplybill 667,330
lessaccounting 231,319
freshbooks 98,225
simplyinvoices 646,219
getcashboard 395,123
invoiceplace 796,786
Personal Finance
mint 47,585
wesabe 1,770
yodlee 42,915
blinksale 76,350 (Alexa Ranking 7-17-08)
simplybill 667,330
lessaccounting 231,319
freshbooks 98,225
simplyinvoices 646,219
getcashboard 395,123
invoiceplace 796,786
Personal Finance
mint 47,585
wesabe 1,770
yodlee 42,915
Sample Rich Media Page
Death By Audio, Williamsburg BK
Friday at Death By Audio was another entertainment4every1 production, with typically varied lineup, this one incorporating fully six out-of-town acts from four different cities (plus a local opener). If there was a loose unifying theme, it was various uses of electronics, but that's definitely a very loose theme seeing as two acts involved nothing electronic at all.
Those two acts were Family Trees, a twangy drums/guitar/harmonies side project of Brooklyn electric folk outfit Hologram, and Oakland guitarist Brian Glaze (formerly of Gris Gris and the Brian Jonestown Masacre), now in simple classic rock configuration with a bassist and drummer.
Videohippos were the expected following act on the bill, and shortly thereafter delivered their hazy electronica-tinted lo-fi rock. Somehow, even when moving into the upper tempos, as on a selection of apparently newer pieces, they maintain a sort of downbeat dream-feel, amplified of course by their accompanying video collages of hypnotism advice, bits of John Carpenter's They Live, and arcane cartoons.
But before all that, a sudden appearance by Videohippos' Baltimore and Wham City ally Blue Leader. Blue Leader is not a band or musician, but more a lecturer, delivering this time a rousing oratory titled "The History of Video Games Part III: The First Person Shooter." Sort of like a manic army recruitment speech delivered by a halloween/pajamas version of Cyclops, but recruiting its listeners to fight the actual monsters from DOOM, as illustrated via projections on the screen behind him. This appearance was a welcome interlude that no one, not even e4e1 organizers Dave and Edan, saw coming.
Finally, Lymbyc System finished the night with easily its most accomplished show of musicianship. The two members, brothers from Austin and Phoenix, now releasing on notable electronic/hip-hop label Mush, each surrounded himself with a formidable collection of gear, one with three synthesizers (two of them full-length keyboards) and a pedal array, the other taking live drums, assorted additional percussion, and xylophone. And while their sound was classic lush electronica in vaguely the Four Tet vein, the brothers seemed to be pulling it all off live. Literally all the major song components, elaborate counter-melodies and evolving breakbeats, were visibly coming out of their instruments right then, with only minor atmospherics and background noise requiring some additional sequencing. Caribou, even with twice the touring members, isn't quite this good at recreating their warmly electronic arrangements before an audience. And I didn't even know the Lymbyc System before this show, so this all came as a very pleasant surprise.
Friday at Death By Audio was another entertainment4every1 production, with typically varied lineup, this one incorporating fully six out-of-town acts from four different cities (plus a local opener). If there was a loose unifying theme, it was various uses of electronics, but that's definitely a very loose theme seeing as two acts involved nothing electronic at all.
Those two acts were Family Trees, a twangy drums/guitar/harmonies side project of Brooklyn electric folk outfit Hologram, and Oakland guitarist Brian Glaze (formerly of Gris Gris and the Brian Jonestown Masacre), now in simple classic rock configuration with a bassist and drummer.
Videohippos were the expected following act on the bill, and shortly thereafter delivered their hazy electronica-tinted lo-fi rock. Somehow, even when moving into the upper tempos, as on a selection of apparently newer pieces, they maintain a sort of downbeat dream-feel, amplified of course by their accompanying video collages of hypnotism advice, bits of John Carpenter's They Live, and arcane cartoons.
But before all that, a sudden appearance by Videohippos' Baltimore and Wham City ally Blue Leader. Blue Leader is not a band or musician, but more a lecturer, delivering this time a rousing oratory titled "The History of Video Games Part III: The First Person Shooter." Sort of like a manic army recruitment speech delivered by a halloween/pajamas version of Cyclops, but recruiting its listeners to fight the actual monsters from DOOM, as illustrated via projections on the screen behind him. This appearance was a welcome interlude that no one, not even e4e1 organizers Dave and Edan, saw coming.
Finally, Lymbyc System finished the night with easily its most accomplished show of musicianship. The two members, brothers from Austin and Phoenix, now releasing on notable electronic/hip-hop label Mush, each surrounded himself with a formidable collection of gear, one with three synthesizers (two of them full-length keyboards) and a pedal array, the other taking live drums, assorted additional percussion, and xylophone. And while their sound was classic lush electronica in vaguely the Four Tet vein, the brothers seemed to be pulling it all off live. Literally all the major song components, elaborate counter-melodies and evolving breakbeats, were visibly coming out of their instruments right then, with only minor atmospherics and background noise requiring some additional sequencing. Caribou, even with twice the touring members, isn't quite this good at recreating their warmly electronic arrangements before an audience. And I didn't even know the Lymbyc System before this show, so this all came as a very pleasant surprise.
Wednesday, July 16, 2008
Blogger with its own domain name
This tutorial explains how to convet name.blogspot.com to a full www.name.com, and
this tutorial explains how to put a custom template on this blog.
this tutorial explains how to put a custom template on this blog.
- Buy your own domain, and create a CNAME record for it to point to ghs.google.com (unless you buy the domain through Blogger).
- Enter your domain in the 'Custom Domain' option on the Settings Publishing tab.
Monday, July 14, 2008
livetutor247 site
Our online tutor center site, http://www.livetutor247.com, consist of:
index.htm - targeting the public for perspective students.
opportunities.htm - public page for the perspective tutors.
courses.htm - public page for all perspectives.
schedule.htm - public page for available scheduled (group or individual) classes
user.htm - secured page for registered user which contains profile, classes, and reports.
tutor.htm - secured page for contract tutors which contains profile, classes, and reports.
Index.htm
In essence, we do not need a lot of verbage to explain what we do. We should use lots of clear samples of what we do, such as archived or live audio/video clips. We shall use the tutor star as the base frame.
Opportunities.htm
We are to ask perspective tutor to tell us what course they would like to teach, or even to construct. The applicant can select their tutoring course from our courses.htm page or approved page, similar to learnoutloud.
The applicant needs to
1. to choose, and to submit a syllabus for a particualr subject.
2. to be tested on familiarity and ability to handle the tutoring of that subject.
3. to have a qualified syllabus and course material
Courses.htm
We offer (publish) our courses based on the availability of qualified contract tutors on this page. The course material pages can contain information like http://www.learnoutloud.com/Catalog/Languages, but organized in our own course numbers.
Schedule.htm
This page is made of javascript for (public and registered) user to navigate through all class schedules. The user may search for desired class by tutor, course, availability, and time.
_____________________________________
Roadmap
Here is what I have come up so far, (after going through several iterations of likely scenarios)
Our tutoring center might go through the following four stages:
stage 1 - A small direct retailer that does online language tutoring
stage 2 - An online tutoring center for many (a lot of) subjects
stage 3 - an OEM service provider to other Learning center
and finally
stage 4 - An online exchange for those who can and want to help and who need to be helped.
Regardless of which stage we can reach, there are lots of money to be made.
Stage 1
Most of the teaching material that we have secured are Pimsleur Learning.
Our main page are to re-post and fold those Pimsleur materials as if we are (but we will be) one of the Pimsleur authorized dealer. The advantages of (Pimsleur) learning system for those pages can be found from many of the pimsleur's other dealers. Those interested can buy the pimsleur audio books from us or elsewhere. But most importantly, sign up our tutoring session. Simply google on pimsleur will result tons of dealers.
Stage 2
At this stage we focus on building up great tutoring staff. We are going to establish the pay by ranking system. We are also are going to contact the students for feedbacks. We will have a rating system to make sure the tutor's pay reflects the student's feedback.
Stage 3
After we build up sufficient tutor staff, we have the learning centers to resell our tutoring specific, partial, or general tutoring services. Here are our value to our learning center partners:
a) the staff managment - We recruit, and manage our tutor staff, we make sure a tutor will be there for each and every session; if a tutor miss or late for the seesion for 3 times without a prior confirmed notice, this tutor are to be terminated.
b) white labeling - We can also support the anonymous reselling.
c) time slot/zone coverage - Our 247 operation covers all time zones, and our large tutor team size covers all timeslots.
d) subject/language coverage
e) session management - We facilitate and administer all sessions with great professional courtesey, such as email/sms reminders, and post reports.
_____________________________________
Media Presentation
what page needs to be developed depending on which stage we are in.
we can have like a video show/ promoting the site like on oracle. I have left the detail to you, such as video, spry widgets or apturized page, or the actor narrate on top of a page, by onsitevideos. The bottom line is that our solution can save time and money.
Media Storage
The (podcast) audio clips are to move to diinoweb. First we are going to use podcast diinoweb.com across the board to all our biz sites: Livetutor, Oracle, Inkjet, ... etc.
Organizing the Page Contents
To us, most of the spry widgets are great information folding mechanism. Depending on how much information we have to present, the accordion-ds holds more information than the sliding panel.
We could utilize these widgets on different pages. It might not be a good idea to put tutors on accordion. I think most people would prefer to use traditional index searching on class/course/tutor, and for different language programs,.
The slide panel is using background image instead of image on the panel. The slide panel is having a fix layout
Because the spry show panel command has a bug to re-layout images in the pane..... it will reset the cordinates and recalculate each time. In the process, the image is everywhere. So the tutorial that I took the reference design, bypass that problem by setting the image on the background
How to placing Content inside the Sliding Panel Pane
Sample page is on this site, and its template design is a very good layout, I can visualize those pages after added the widgets, and apturize page. The sliding panel widget does not work the same as the accordion.
Images
The images are located inside the images folders:
\images where the thumb images are stored.
\images\details where the images inside the pane are stored.
Use Firebug
Please use firebug to locate and exam the element that you like to change.
On firebug, Click on "Inspect", then "element", then "HTML",
then go up to the browser's (upper) view pane, and click on the element to be exam,
the fire bug will highlight the selected element's html code.
Do not Change/Touch the Layout
The sliding panel pane layout uses a split frame design: (background) image on the left, and text on the right. Limit the modification to simple replacement of the image, text, and bg color, so long we do not change its layout and keep the same design.
Background Color
index-1.html (line 33) #main #thumbs background: #4F310D
index-1.html (line 43) #main #panelContainer background: #452B0D
index-1.html (line 55) #main #panel0 background:#A8BAAA
Textual Content
All textual descriptions are inside the widget are located on the index-1.html
When navigate on sample page, those thumb image did not have the hover effect.
You are welcome to add the mouse over (hover) effect.
Object in Motion Image
How to make the image in transit? First reduce the image size save it and increase the size again!
when the image is blown up from a low resolution image, it became blur. This blur effect enhances the motion effect.
Mechanisms to be use for different types of info
On livetutor247 information such as languages, program, syllabus, our advantages, ...etc that all probably can take advantage of the widget panes
Having the tutor and course be shown on indexed search page make sense. The reason is that the tutor and course information are dynamically and frequently add, delete, and modified. Its size (volumn) can fluctuate (swing) rapidly.
The following information makes more sense to be grouped into one or many widget panes:
languages, programs, syllabus, advantages, competitor analysis, testimonials,
_____________________________________
Business Tactics
Sourcing from other Learning Center
Joint program with tour operator, exchange student
Free basic public (broadcast) lessons
Create Podcast syndication
Flat fee A La Cart
Automatic distribution of class note
Syllabus - predefined lessons
test ad
Automate TutorStar operation via ERD
Certification/referral
Reselling course material, such as Pimsleur
======To Dos before going live=========
1. local classified ad to recruit/quality tutor
2. contract tutor agreement
3. sign up tutor to upload their profile page.
4. drive the traffic to the website
5. sign up the class
6. admin to manage the individual/group lesson and generate reports
7. CRE rating/customer feedback
8. CRE search data
9. CRE form
a. CRE secured sign up/in
b. CRE payment
c. CRE transaction/record/notice
d. Two way live instruction - live.yahoo (2 or more cameras), skype audio, Mikogo
index.htm - targeting the public for perspective students.
opportunities.htm - public page for the perspective tutors.
courses.htm - public page for all perspectives.
schedule.htm - public page for available scheduled (group or individual) classes
user.htm - secured page for registered user which contains profile, classes, and reports.
tutor.htm - secured page for contract tutors which contains profile, classes, and reports.
Index.htm
In essence, we do not need a lot of verbage to explain what we do. We should use lots of clear samples of what we do, such as archived or live audio/video clips. We shall use the tutor star as the base frame.
Opportunities.htm
We are to ask perspective tutor to tell us what course they would like to teach, or even to construct. The applicant can select their tutoring course from our courses.htm page or approved page, similar to learnoutloud.
The applicant needs to
1. to choose, and to submit a syllabus for a particualr subject.
2. to be tested on familiarity and ability to handle the tutoring of that subject.
3. to have a qualified syllabus and course material
Courses.htm
We offer (publish) our courses based on the availability of qualified contract tutors on this page. The course material pages can contain information like http://www.learnoutloud.com/Catalog/Languages, but organized in our own course numbers.
Schedule.htm
This page is made of javascript for (public and registered) user to navigate through all class schedules. The user may search for desired class by tutor, course, availability, and time.
_____________________________________
Roadmap
Here is what I have come up so far, (after going through several iterations of likely scenarios)
Our tutoring center might go through the following four stages:
stage 1 - A small direct retailer that does online language tutoring
stage 2 - An online tutoring center for many (a lot of) subjects
stage 3 - an OEM service provider to other Learning center
and finally
stage 4 - An online exchange for those who can and want to help and who need to be helped.
Regardless of which stage we can reach, there are lots of money to be made.
Stage 1
Most of the teaching material that we have secured are Pimsleur Learning.
Our main page are to re-post and fold those Pimsleur materials as if we are (but we will be) one of the Pimsleur authorized dealer. The advantages of (Pimsleur) learning system for those pages can be found from many of the pimsleur's other dealers. Those interested can buy the pimsleur audio books from us or elsewhere. But most importantly, sign up our tutoring session. Simply google on pimsleur will result tons of dealers.
Stage 2
At this stage we focus on building up great tutoring staff. We are going to establish the pay by ranking system. We are also are going to contact the students for feedbacks. We will have a rating system to make sure the tutor's pay reflects the student's feedback.
Stage 3
After we build up sufficient tutor staff, we have the learning centers to resell our tutoring specific, partial, or general tutoring services. Here are our value to our learning center partners:
a) the staff managment - We recruit, and manage our tutor staff, we make sure a tutor will be there for each and every session; if a tutor miss or late for the seesion for 3 times without a prior confirmed notice, this tutor are to be terminated.
b) white labeling - We can also support the anonymous reselling.
c) time slot/zone coverage - Our 247 operation covers all time zones, and our large tutor team size covers all timeslots.
d) subject/language coverage
e) session management - We facilitate and administer all sessions with great professional courtesey, such as email/sms reminders, and post reports.
_____________________________________
Media Presentation
what page needs to be developed depending on which stage we are in.
we can have like a video show/ promoting the site like on oracle. I have left the detail to you, such as video, spry widgets or apturized page, or the actor narrate on top of a page, by onsitevideos. The bottom line is that our solution can save time and money.
Media Storage
The (podcast) audio clips are to move to diinoweb. First we are going to use podcast diinoweb.com across the board to all our biz sites: Livetutor, Oracle, Inkjet, ... etc.
Organizing the Page Contents
To us, most of the spry widgets are great information folding mechanism. Depending on how much information we have to present, the accordion-ds holds more information than the sliding panel.
We could utilize these widgets on different pages. It might not be a good idea to put tutors on accordion. I think most people would prefer to use traditional index searching on class/course/tutor, and for different language programs,.
The slide panel is using background image instead of image on the panel. The slide panel is having a fix layout
Because the spry show panel command has a bug to re-layout images in the pane..... it will reset the cordinates and recalculate each time. In the process, the image is everywhere. So the tutorial that I took the reference design, bypass that problem by setting the image on the background
How to placing Content inside the Sliding Panel Pane
Sample page is on this site, and its template design is a very good layout, I can visualize those pages after added the widgets, and apturize page. The sliding panel widget does not work the same as the accordion.
Images
The images are located inside the images folders:
\images where the thumb images are stored.
\images\details where the images inside the pane are stored.
Use Firebug
Please use firebug to locate and exam the element that you like to change.
On firebug, Click on "Inspect", then "element", then "HTML",
then go up to the browser's (upper) view pane, and click on the element to be exam,
the fire bug will highlight the selected element's html code.
Do not Change/Touch the Layout
The sliding panel pane layout uses a split frame design: (background) image on the left, and text on the right. Limit the modification to simple replacement of the image, text, and bg color, so long we do not change its layout and keep the same design.
Background Color
index-1.html (line 33) #main #thumbs background: #4F310D
index-1.html (line 43) #main #panelContainer background: #452B0D
index-1.html (line 55) #main #panel0 background:#A8BAAA
Textual Content
All textual descriptions are inside the widget are located on the index-1.html
When navigate on sample page, those thumb image did not have the hover effect.
You are welcome to add the mouse over (hover) effect.
Object in Motion Image
How to make the image in transit? First reduce the image size save it and increase the size again!
when the image is blown up from a low resolution image, it became blur. This blur effect enhances the motion effect.
Mechanisms to be use for different types of info
On livetutor247 information such as languages, program, syllabus, our advantages, ...etc that all probably can take advantage of the widget panes
Having the tutor and course be shown on indexed search page make sense. The reason is that the tutor and course information are dynamically and frequently add, delete, and modified. Its size (volumn) can fluctuate (swing) rapidly.
The following information makes more sense to be grouped into one or many widget panes:
languages, programs, syllabus, advantages, competitor analysis, testimonials,
_____________________________________
Business Tactics
Sourcing from other Learning Center
Joint program with tour operator, exchange student
Free basic public (broadcast) lessons
Create Podcast syndication
Flat fee A La Cart
Automatic distribution of class note
Syllabus - predefined lessons
test ad
Automate TutorStar operation via ERD
Certification/referral
Reselling course material, such as Pimsleur
======To Dos before going live=========
1. local classified ad to recruit/quality tutor
2. contract tutor agreement
3. sign up tutor to upload their profile page.
4. drive the traffic to the website
5. sign up the class
6. admin to manage the individual/group lesson and generate reports
7. CRE rating/customer feedback
8. CRE search data
9. CRE form
a. CRE secured sign up/in
b. CRE payment
c. CRE transaction/record/notice
d. Two way live instruction - live.yahoo (2 or more cameras), skype audio, Mikogo
Saturday, July 12, 2008
Subscribe to:
Posts (Atom)