play us up - technica breif
DESCRIPTION
TRANSCRIPT
![Page 1: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/1.jpg)
PLAY US UPTechnical Brief
Panaite Victor
Stoleru Andrei
![Page 2: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/2.jpg)
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.
![Page 3: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/3.jpg)
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.
![Page 4: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/4.jpg)
Design patterns used• Liquid layout with fixed width sidebar• List-layout• Grid-layout
![Page 5: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/5.jpg)
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.
![Page 6: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/6.jpg)
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.
![Page 7: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/7.jpg)
Technologies used• HTML 5 (with local storage) • CSS 3• jQuery• PHP• Optimization for Google Chrome
![Page 8: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/8.jpg)
Implementation methods• Please refer to the written technical brief for some code
examples and their explanations
![Page 9: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/9.jpg)
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
![Page 10: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/10.jpg)
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
![Page 11: Play us up - technica breif](https://reader034.vdocuments.us/reader034/viewer/2022051515/553843125503464e418b4742/html5/thumbnails/11.jpg)
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