PLAY US UPTechnical Brief

Panaite Victor

Stoleru Andrei

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.

Application idea – final version• The project is currently live at http://playusup.com/ 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.

Design patterns used• Liquid layout with fixed width sidebar• List-layout• Grid-layout

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.

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.

Technologies used• HTML 5 (with local storage) • CSS 3• jQuery• PHP• Optimization for Google Chrome

Implementation methods• Please refer to the written technical brief for some code

examples and their explanations

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

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

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