Play us up - technica breif


Published on

Published in: 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

Play us up - technica breif

  1. 1. PLAY US UPTechnical BriefPanaite VictorStoleru Andrei
  2. 2. Introduction - Online Content• We can see how all our files are now online: your random files are stored on Dropbox or SkyDrive,• the documents you use are stored in Google Docs,• photos are stored on Picasa or Flickr,• you find music and videos on a large variety of sites as Groveshark, Spotify, YouTube, Vimeo etc.• and all your activity is stored on social sites like Facebook or Google Plus.
  3. 3. Application idea – final version• The project is currently live at and is optimized for Google Chrome and for some mobile devices: Apple iPad and handheld devices with Android OS 2.3.5.• The final version of this project consists in a set of tools meant to help users in creating and managing online video playlists, by offering a Vimeo and YouTube search option along with a Karaoke mode. All the video playlists created are stored locally and can be exported and later imported on other devices.
  4. 4. Design patterns used• Liquid layout with fixed width sidebar• List-layout• Grid-layout
  5. 5. UX study• Project was developed for ease of use and for clearly identifying key objects in the page. The site is full width and single paged for improving visibility and simplifying actions performed.• The symbols used are commonly found on different sites and define precise actions such as search, upload, add or delete. The main UX idea is to use this project without any special training in web technologies, just the users experience on other web sites.
  6. 6. UX study• Users can switch between a grid-layout and a list-layout for the dynamic section for a better visualization of songs depending on their preferences.
  7. 7. Technologies used• HTML 5 (with local storage)• CSS 3• jQuery• PHP• Optimization for Google Chrome
  8. 8. Implementation methods• Please refer to the written technical brief for some code examples and their explanations
  9. 9. Usability• This project covers both the iOS and Web browser platform, providing an easy-to use interface. The entire space of the browser it is used for a full width display, using the liquid-layout pattern. This will assure an optimized displayed for both large screens as for tablets and small devices
  10. 10. Usability• The project was designed to highlight the search bar, the playlists sidebar and the main videos area. By this, the user can use the main functions of this project easily. Pop- up messages were implemented into the project to block an unwanted action, such as: deleting a playlist, importing a new playlist file, etc• Other examples with mobile devices will be presented live
  11. 11. Conclusion• Considering the nature of this project and the scope, the main goals of this project were achieved. The usage of the new web standards, such as: HTML5, JS localStorage and CSS3, made the development process as fun and interactive as the application itself. The new HTML5 tags helped us create better HTML structures and styling with CSS3 improved a lot the loading time of the final project. Thank you