Project2 Design Specs


Published on

Published in: Economy & Finance, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Project2 Design Specs

  1. 1. Dr. Danielle Babb Website Project
  2. 2. <ul><li>The Extensions </li></ul><ul><li>JContent Subscription </li></ul><ul><li>Juser </li></ul><ul><li>DocMan </li></ul><ul><li>Marketplace </li></ul><ul><li>Fireboard </li></ul><ul><li>Digistore </li></ul><ul><li>RSS Feeder </li></ul><ul><li>Glossary </li></ul><ul><li>Jom Comment </li></ul><ul><li>Phil-a-Form </li></ul><ul><li>Seyret </li></ul><ul><li>My Blog </li></ul><ul><li>Socioword </li></ul><ul><li>SocioTag </li></ul><ul><li>AllVideos </li></ul><ul><li>SimpleGalleryPro </li></ul>
  3. 3. Sub Headers: PIPE <ul><li>We need DIVIDERS: | ( pipe ) in between each link </li></ul>Basic HTML Modification
  4. 4. <ul><li>the </li></ul><ul><li>Positioning of the Layout </li></ul><ul><li>From the TOP </li></ul>
  5. 5. Layout Positioning This is the current Positioning Recommended Positioning Work left to do <ul><li>Notice how the positioning of the layout from the top of the page </li></ul><ul><li>I recommend that we remove the FONT resizing tools – it’s not necessary for the time being… </li></ul><ul><li>We need more space for viewing so we push the layout area up some changing the height between the top of the page and the top of the layout area </li></ul>Basic HTML Modification
  6. 6. <ul><li>Dem </li></ul><ul><li>BREADCRUMBS! </li></ul>
  7. 7. Site Breadcrumbs <ul><li>Breadcrumbs need to be on every single page of the site and they are not… so we need to fix this. I need it on each component page – this is where it is lacking: </li></ul><ul><li>RSS, DocMan, DigiStore, Fireboard, MarketPlace, SeyRet .. </li></ul>Basic HTML Modification
  8. 8. <ul><li>the </li></ul><ul><li>DISCUSSION FORUMS </li></ul><ul><li>Fireboard </li></ul>
  9. 9. Fireboard Forum Work left to do <ul><li>The login needs to be synchronized with JContentSubscription </li></ul><ul><li>Remove un-needed links at the footer </li></ul>JOOMLA Modification
  10. 10. Fireboard Facelift Work left to do <ul><li>We need to change this background color to #FFFFCC and still leave the same border around it </li></ul><ul><li>We need to change all of these default icons to something that matches the color scheme of the site </li></ul>Basic CSS Modification and Basic Graphics Editing
  11. 11. <ul><li>the </li></ul><ul><li>TEXTBOOK EXCHANGE </li></ul><ul><li>MarketPlace </li></ul>
  12. 12. Textbook Exchange Work left to do <ul><li>Change these ICONS </li></ul><ul><li>Change the grey border around this area to #ffcc66 (gold) </li></ul><ul><li>REDUCE the spacing ABOVE the category description </li></ul><ul><li>AGAIN, the login to this component needs to be synchronized with JContentUser </li></ul><ul><li>It needs to be tweaked to use Private Messenger Component primezilla </li></ul>Basic CSS & JOOMLA Customization
  13. 13. Textbook Exchange Work left to do <ul><li>Adjust these spaces (decrease row height) </li></ul><ul><li>How about a border around the search and sort tools; thickness 1px; border color: ; background color #ffffff </li></ul><ul><li>Reduce the thickness of the borders in between each AD </li></ul>Basic CSS Modification
  14. 14. Textbook Exchange Basic CSS & HTML Modification Work left to do <ul><li>Adjust row heights </li></ul><ul><li>Make sure this TITLE ROW’s background color is #FFFFCC for all; right now it is only so for every third AD and WHITE background for the others. </li></ul><ul><li>We can probably make this area light grey (#dddddd) </li></ul><ul><li>We need to Hyperlink Login to the Login/Register Screen </li></ul>
  15. 15. <ul><li>the </li></ul><ul><li>PRIVATE MESSAGE SYSTEM </li></ul><ul><li>Primezilla </li></ul>
  16. 16. But WHY primezilla <ul><li>CENTRALIZATION </li></ul><ul><li> Different components can use the same SIMPLE System for private messages; primezilla has a simple and clean interface </li></ul><ul><ul><li>It is also the only Private Message System that works with Marketplace ( for your Textbook Exchange ) </li></ul></ul><ul><ul><li>It also works with Fireboard ( your discussion forums ) </li></ul></ul><ul><ul><li>It also works with Community Builder ( for social networking – I am thinking of adding this component to the mix) </li></ul></ul><ul><ul><li>But primezilla comes with PROBLEMS - CONFLICTS </li></ul></ul>
  17. 17. primezilla Conflicts <ul><li>The Problem: </li></ul><ul><ul><li>Once logged in to primezilla, the Slide Menu (your sliding navigation buttons in the HEADER that uses MooTools), no longer shows up; it disappears. </li></ul></ul><ul><ul><li>The Preferences hyperlink does not work </li></ul></ul><ul><li>Isolating the Problems </li></ul><ul><ul><li>I changed the navigation buttons from mootools driven (Slide) to DROPLINE and then SPLIT, same problem </li></ul></ul><ul><ul><li>I disabled the FONT RESIZE user tools, same problem </li></ul></ul><ul><ul><li>I disabled all Modules on the page, same problem </li></ul></ul><ul><ul><li>I then changed the templates to various others, the problem goes away </li></ul></ul><ul><li>Problem Found: </li></ul><ul><ul><li>Something in the coding of the template is conflicting with the coding in primezilla and this conflict has to be resolved. </li></ul></ul>
  18. 18. primezilla needs a facelift Work left to do <ul><li>Change the background color of this row to #FFCC66 (GOLD) </li></ul><ul><li>Change the background color of this row to #FFFFCC (Light Yellow) </li></ul><ul><li>Change the border to #ffcc66 </li></ul><ul><li>Remove the footer references </li></ul>Basic CSS & HTML Modification
  19. 19. primezilla needs a facelift Work left to do <ul><li>Change the background color of this row to #FFCC66 (GOLD) </li></ul><ul><li>Change the background color of this row to #FFFFCC (Light Yellow) </li></ul><ul><li>Remove the footer references </li></ul>Basic CSS & HTML Modification
  20. 20. Sub Headings Work to Do <ul><li>Change the sub headings under each heading in Navigation Bar </li></ul><ul><li>Hyperlink the Amazon books in NEW WINDOW over to the respective AMAZON links </li></ul>Basic HTML Modification
  21. 21. <ul><li>Store & Banners ADS for </li></ul><ul><li>Each Store Category </li></ul><ul><li>DigiStore </li></ul>
  22. 22. The Store needs work Work to Do <ul><li>Breadcrumbs go here Remove ALL CATEGORIES </li></ul><ul><li>Create ADS for each section of the store. Maybe we can use the same background and some catchy statement therein with a nice image to the left. </li></ul><ul><li>Remove these spaces for the description -underneath. The AD should suffice. </li></ul><ul><li>Remove “View Products” </li></ul>Basic CSS & HTML Modification & Graphics Editing
  23. 23. Store illustrated <ul><li>Just wanted to make sure that I illustrated how the store categories should look after modifications </li></ul><ul><li>Notice the Breadcrumbs are still missing… this must be included on every page </li></ul><ul><li>Remove the All Categories and replace this with Breadcrumbs </li></ul><ul><ul><li>------ Home / Store </li></ul></ul>
  24. 24. <ul><li>the </li></ul><ul><li>Document Management System </li></ul><ul><li>DocMan </li></ul>
  25. 25. Document Management <ul><li>These ICONS have to be removed and of course we need BREADCRUMBS instead </li></ul>Work to Do Basic HTML Modification in Extension Interface
  26. 26. Documents Listed <ul><li>Remove the “Details Link” </li></ul>Work to Do Basic HTML Modification within extension interface
  27. 27. <ul><li>the </li></ul><ul><li>Contact Page </li></ul><ul><li>Joomla Native </li></ul>
  28. 28. Contact Page Work to Do <ul><li>Put a Line Here to divide the two </li></ul>Basic CSS Modification
  29. 29. <ul><li>the </li></ul><ul><li>Video Component </li></ul><ul><li>Seyret </li></ul>
  30. 30. Seyret - After Work Already Done <ul><li>I left the Buttons on the top; those we should change. </li></ul><ul><li>I removed the information box under the video box </li></ul><ul><li>I changed the background of the video box to black; it’s quite effective – especially with the 4px border around it </li></ul><ul><li>We need nicer thumbnails for each video. We need to create them carefully </li></ul>
  31. 31. View Video - After Work to Do <ul><li>Enter all videos into Seyret. </li></ul><ul><li>Create new video thumbnails </li></ul><ul><li>All videos are already on the server </li></ul>Component DATA Entry; basic Graphics work
  32. 32. <ul><li>OMG! </li></ul><ul><li>The FOOTER </li></ul><ul><li> </li></ul>
  33. 33. The Footer <ul><li>We need to insert HyperLinks : </li></ul><ul><ul><li>Home </li></ul></ul><ul><ul><li>Privacy & Security </li></ul></ul><ul><ul><li>Returns & Warranties </li></ul></ul><ul><ul><li>Contact Us </li></ul></ul><ul><li>We need to insert Image Links : </li></ul><ul><ul><li>Paypal </li></ul></ul><ul><ul><li>Credit Card Logos </li></ul></ul><ul><ul><li>Comodo Seal </li></ul></ul>Basic CSS & HTML Modification
  34. 34. SimpleGalleryPro <ul><li>There is some sort of conflict where the Lightbox effects do not work – please resolve </li></ul><ul><li>Remove border and shadow from around each image (edit CSS accordingly) </li></ul><ul><ul><li>Category </li></ul></ul><ul><ul><li>Image </li></ul></ul>Conflict Resolution
  35. 35. <ul><li>And now for the </li></ul><ul><li>USER EXPERIENCE </li></ul>
  36. 36. The User Experience <ul><li>WATCH </li></ul><ul><li>Videos Clips </li></ul><ul><li>Pictures </li></ul><ul><li>Slide Shows </li></ul><ul><li>LISTEN </li></ul><ul><li>Audio Clips </li></ul><ul><li>Video Clips </li></ul><ul><li>READ </li></ul><ul><li>Static Content </li></ul><ul><ul><li>FAQs </li></ul></ul><ul><ul><li>About Me </li></ul></ul><ul><li>Dynamic Content </li></ul><ul><ul><li>Blogs </li></ul></ul><ul><ul><li>Comments </li></ul></ul><ul><ul><li>Discussions </li></ul></ul><ul><li>BUY </li></ul><ul><li>Products </li></ul><ul><li>Services </li></ul><ul><li>Advertising </li></ul><ul><li>Tags </li></ul><ul><li>SUBSCRIBE </li></ul><ul><li>Memberships </li></ul><ul><ul><li>Free </li></ul></ul><ul><ul><li>Paid </li></ul></ul><ul><li>PARTICIPATE </li></ul><ul><li>Discussions </li></ul><ul><li>Text Exchange </li></ul><ul><li>Blogs & Comments </li></ul><ul><li>Submit Glossary Terms </li></ul><ul><li>Download Documents </li></ul><ul><li>Browse through Links </li></ul><ul><li>Syndicate Site Contents </li></ul><ul><li>Vote in Blogs </li></ul><ul><li>Email to a Friend </li></ul><ul><li>Bookmark </li></ul><ul><li>Add to Favorites </li></ul> “ OMG… so many things to do here! &quot;
  37. 37. <ul><li>We’ve got to </li></ul><ul><li>CENTRALIZE </li></ul>Joomla Customization using integration tool within JContent -Subscription and JUser   
  38. 38. LOG ON - Centralization Participate Community Downloads Post BLOG Entries Post Comments Submit Glossary Terms Purchase Products Services Exchange Text Books Create/Respond Discussion Threads VIEW Content Add Subscriptions Use JContent Subscription as the central point for all logon. Synchronize it with JUser 
  39. 39. User Menu - Centralization USER MENU My Comments My Forum Posts My Blog Posts My Text Book Ads My Profile Ensure that from ONE menu, users can access their site participation My Orders My Subscriptions My Private Messages 
  40. 40. Avatars - Centralization AVATAR Tweak so that we user AVATAR and use it in each instance within the Content Management System  Community Builder Fireboard Discussions MyBLOG Blogs JomComment Comments JOOMLA Profile
  41. 41. PMS - Centralization PMS Community Builder Fireboard Discussions Textbook Exchange Let users use ONE Private Message System each of the components that use them Joomla Customization
  42. 42. <ul><li>Validate Site As </li></ul><ul><li>XHTML & CSS Compliant </li></ul>Basic CSS & HTML
  43. 43. <ul><li>Protect Joomla Code </li></ul><ul><li>Jdefender </li></ul><ul><li>Configure Accordingly </li></ul>Extension Customization