Skip to content

Commit

Permalink
corrections done till pages
Browse files Browse the repository at this point in the history
  • Loading branch information
janmonschke committed Apr 18, 2011
1 parent c65399e commit f64ffdd
Show file tree
Hide file tree
Showing 13 changed files with 10 additions and 10 deletions.
Binary file not shown.
Binary file modified assets/image_edit_links_page.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/image_edit_links_page_OLD.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/page_coverimage.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/page_coverimage_hovered.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions chapters/intro.md
@@ -1,10 +1,10 @@
## Salon intro

### What is Salon? Overview
Salon is a web-based system that allows its users to create pages and to upload images onto these pages to create an online portfolio of their work. The main target audience is photographers, illustrators and graphic designers. The platform focuses on a unique way in both presenting and arranging sets of images. The user is able to fully control the way the images are presented to the visitors.
Salon is a web-based platform that allows its users to create pages and to upload images onto these pages to create an online portfolio of their work. The main target audience is photographers, illustrators and graphic designers. The platform focuses on a unique way in both presenting and arranging sets of images. The user is able to fully control the way the images are presented to the visitors.
Other services, like for example Flickr, don't let users decide about the presentation of their work and only provide simple list views and slide shows. On these websites all albums look the same because the raster is always predefined.
In Salon all images are placed on a canvas and can freely get dragged around by the user to create innovative and unique arrangements. Also the canvas itself can be moved to focus a certain point of a page. Another feature is that images can link to other pages so that users can create associations between pages or even associations between users.
These features give the user another way to express creativity.
These features give the user another way to express his creativity and make Salon stand out from all competing websites.

### The idea
Dipl. Inf. Sebastian Deutsch and Dipl. Des. Stefan Landrock developed the basic idea behind Salon when were guest-lecturing courses at the HFG Offenbach. Together with their students they built a working prototype of their idea so they could use it for their courses and especially for their presentations. When other universities heard about Salon they were asked if they could host a system for their students too. But Salon was not built to be deployable for other universities and so they had the idea to rewrite and to extend the features of Salon so that it could easily be set up for other universities.
Dipl. Inf. Sebastian Deutsch and Dipl. Des. Stefan Landrock developed the basic idea behind Salon when they were guest-lecturing courses at the HFG Offenbach. Together with their students they built a working prototype of their idea so they could use it for their courses and especially for their presentations. When other universities heard about Salon they were asked if they could host a system for their students too. But Salon was not built to be deployable for other universities and so they had the idea to rewrite and to extend the features of Salon so that it could easily be set up for other universities.
2 changes: 1 addition & 1 deletion chapters/salon implementation/Pages/index page.md
@@ -1,4 +1,4 @@
### INDEX PAGE
The index page has, as well as other elements in Salon, two states that depend on the login state of the user. If the user is not logged in the index page displays a text that invites the user to register an account at Salon and a link to the about page so that new users quickly get an idea about what Salon is and how they can use it.
If the user is logged in, the text on the index page welcomes the user and a list of recently created and edited pages is shown at the bottom of the page.
The index page does not have much functionality since the discovery of pages and images is realized with the search field that is located in the navigation (more on search here [x.x]).
The index page does not have much functionality since the discovery of pages and images is realized with the search field that is located in the navigation (see I 3.3.9 "Search").
2 changes: 1 addition & 1 deletion chapters/salon implementation/Pages/registration.md
@@ -1,4 +1,4 @@
### Registration and Account
In Salon users have to sign-up with an Username, an E-Mail address and a password. To complete a registration the user is sent an e-mail with a confirmation link. This step is needed to confirm that a user registered with a valid address. After clicking the link in the mail the system redirects the user to an empty page called "untitled page" and a message is shown that the account now has successfully been confirmed. Since this is the first time the user uses Salon, a message on the page tells him that he now is able to add images to the page by dragging them onto the window. Also a link to the about page is shown so that new users can get a quick overview on the features of Salon.
In Salon users have to sign-up with an Username, an E-Mail address and a password. To complete a registration the user is sent an e-mail with a confirmation link. This step is needed to confirm that a user registered with a valid e-mail address. After clicking the link in the mail the system redirects the user to an empty page called "untitled page" and a message is shown that the account now has successfully been confirmed. Since this is the first time the user uses Salon, another message on the page tells him that he now is able to add images to the page by dragging them onto the window. Also a link to the about page is shown so that new users can get a quick overview on the features of Salon.

The edit account details, like the password or the e-mail address, users can use the "Account" page (link in the menu). This page also allows the user to delete the account.
4 changes: 2 additions & 2 deletions chapters/salon implementation/Pages/users.md
@@ -1,8 +1,8 @@
### Users

## User overview
In the user overview all, published and not hidden, pages of a user are displayed on a canvas. Since pages can have a cover image, on this page only the cover images are shown. If a page does not have a cover image, a default picture will get displayed instead. The user is able to arrange all images just by dragging them around (more on DnD here [x.x]). The positions are being saved to the server so that this page will look the same for all visitors and just as the user wants it to look like. Visitors themselves can also drag the images around and create a new layout but the position will not get saved to the server since only the owner has the right to decide how his pages look like.
When dragging an image the image will get populated to the top of all other images so that users can easily create nice effects with occluding images. All theses changes will all automatically get saved to the server without the need for the user to initiate the save-process.
In the user overview all, published and not hidden, pages of a user are displayed on a canvas. Since pages can have a cover image, on this page only the cover images are shown. If a page does not have a cover image, a default picture will get displayed instead. The user is able to arrange all images simply by dragging them around. The positions are being saved to the server so that this page will look the same for all visitors and just as the user wants it to look like. Visitors themselves can also drag the images around and can create a new layout but the position will not get saved to the server since only the owner has the right to decide how his pages look like.
When dragging an image, the image will get populated to the top of all other images so that users can easily create nice effects with occluding images. All theses changes will all automatically get saved to the server without the need for the user to initiate the save-process.
To highlight the importance of the images and especially their arrangement there are no further information displayed on top of each image. This is also done so that text elements don't clutter or disturb arrangements that contain a lot of images.
Further information for a page is displayed on top of the images when a user hovers (or taps) over one of the images. The name of the page and the number of assets that are contained in this page will then fade in and the image gets a half-lucent overlay to highlight which image currently is being hovered. There is the need for the half-lucent overlay because when many pages are placed in the same page it is hard to find out which of the images just has been hovered. Clicking one of the images or its captions will navigate the user to the overview of the page.
When the current user is logged in there will also be additional controls displayed on top of each hovered image. First there is the control to set the size of the image that lets the user choose between four different size options. Then there is a link to the edit page of the current page that allows a user to quickly edit the page and there is a link to delete the current page. All delete operations in Salon trigger a prompt before actually deleting an element to prevent accidental deletions.
Expand Down
4 changes: 2 additions & 2 deletions chapters/salon implementation/models.md
@@ -1,4 +1,4 @@
### Model structure
The underlying data model of Salon is shown in Fig. 2. There is the User class that is used for authentication and it has properties like a username and a password. The Page class is associated to the User class in a one-to-many relationship, which means that instances of User can reference many instances of Page and each instance of Page belongs to only one instance of User. Pages have properties like a title, a cover image and a publish state. Each Page has a list of Assets that are also associated in a one-to-many relationship so that each Asset can be associated to one Page. The Asset class is the parent class for Image and it stores properties like a title, a link-to location and a position on the canvas.
The reason for inheriting the Image class from the Asset class is to allow other Assets, like for example texts, in the future (see salon#quovadis) and to provide all instances of Image with the needed properties that make up a valid Asset. The Image class then only needs to save properties like the image files and its display sizes.
All Asset instances have a list of Tags that are associated in a many-to-many relationship which means that an instance of Tag can belong to many instances of Asset and each instance of Asset is able to reference many instances of Tag. The Tag class is used in the search (see salon#pages#search) and only stores a title and the associations.
The reason for inheriting the Image class from the Asset class is to allow other Assets, like for example texts, in the future (see I 4. "Quo vadis Salon?") and to provide all instances of Image with the needed properties that make up a valid Asset. The Image class then only needs to save properties like the image files and its display sizes.
All Asset instances have a list of Tags that are associated in a many-to-many relationship which means that an instance of Tag can belong to many instances of Asset and each instance of Asset is able to reference many instances of Tag. The Tag class is used in the search (see I 3.3.9 "Search") and only stores a title and the associations.
2 changes: 1 addition & 1 deletion chapters/salon implementation/technology overview.md
@@ -1,4 +1,4 @@
### Technology
The backend of Salon is implemented in Ruby on Rails (short Rails), a web framework written in Ruby (Ruby is a object-oriented programming language with a dynamic type system) and modeled after the MVC software pattern [MFGUIA2006] that allows to quickly create solid web applications without having to care about low-level problems like session-handling or database access. The underlying database is MongoDB (http://www.mongodb.org/), a document-oriented database system that was chosen because of its flexibility (document-oriented databases are schema free [EHCASS2011]) and its very good integration in Rails.
Salon does not make use of the full Rails stack, especially the frontend toolchain is completely ignored because the frontend is designed to work as a Single Page Web App (see SPWA#intro).
Salon does not make use of the full Rails stack and especially the frontend toolchain is completely ignored because the frontend is designed to work as a Single Page Web App (see II 1.1).
The communication between the frontend and the backend is realized with a REST(REST stands for Representational State Transfer and is an architecture style that is very efficient by making extensive use of HTTP and its methods [RFARCH2000]) interface and all data is being sent in the JSON (http://en.wikipedia.org/wiki/JavaScript_Object_Notation) format, a format that is very easy to use in both JavaScript (frontend) and Ruby (backend).
Binary file not shown.
Binary file not shown.

0 comments on commit f64ffdd

Please sign in to comment.