ThingLink User Guide Yon Corp Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon
Index Preface.. 2 Overview... 3 Installation. 4 Functionality. 5 Troubleshooting... 6 FAQ... 7 Contact Information. 8 Appendix... 9 1
Preface This document is a user guide for the ThingLink rich media tags developed by the Yon Corp group. Although each tag is for a different service, all tags were developed using the same set languages, which keeps all the tags fairly consistent technology wise. Our tags were submitted to ThingLink directly; thus, the details of the final implementation are not outlined in this document, as ThingLink has chosen to the keep the backend separate from the tag development. 2
Overview Each tag was developed using HTML, CSS and Javascript. For each tag, the image and video tags were written in separate HTML files while the CSS for both was in one file. Javascript for the image and video tags were placed in separate files corresponding to their respective HTML file. Particulars on the implementation for each is briefly outlined below: itunes Tag The itunes search API was used to retrieve album and artist information. AJAX calls were made using javascript, and the returned JSON object was parsed accordingly. The image tag includes the album image, artist/album name, date released, a link to buy the album in the itunes store, and a link to view images of more albums by the artist. The video tag has the same features as the image tag and up to 10 song samples for the album. Wedgies Tag The Wedgies tag includes embed of the Wedgies poll as well as a custom scroll feature. To embed the poll, we used the wedgies embed javascript file as well as our own javascript code for the custom scrolling and the maximum size parameters. The polls include author information, the poll question, and working real time answer buttons. In some polls, clicking the answer buttons brings up the results page. The image tag is similar to the video tag with different dimensions. InstaGrok Tag The InstaGrok tag contains a sample preview image of the concept map, its logo, and a button that links users to the original webpage. The video tag contains additional information which includes a context summary of the concept map. The video tag also has bigger dimensions that the image tag but contains similar content with the exception of the extra information summary. 3
Installation All three of the tags may run on any modern browser. Chrome, Firefox, Safari, and Opera were the main development targets. Some of the CSS made use of more recent features. Thus, for best results the browser should be up to date. All of the files and resources for the tag should be in the same folder as the HTML file. Resources can be put in their own folder if so desired; however, the file path should be modified accordingly in the code. For any specifics on the file paths, refer to HTML/CSS of the tag. Assuming all is set up correctly, to view a tag, open the HTML file using a browser of your choice. 4
Functionality itunes Image Tag: Clicking the Buy on itunes button will open the album s store page in a new tab in the browser. The More By This Artist button load up to 10 more albums by the artist. Hovering over left or right edges of the tag with the mouse cursor will horizontally scroll the albums. Click the Back button will return back to main tag. Video Tag : Clicking the Buy on itunes button will open the album s store page in a new tab in the browser. More albums by the artist are loaded at the bottom of the tag. overing over left or right edges of the tag will horizontally scroll the albums in the same manner as the image tag. Hovering over a song sample will reveal a play button that will switch to a pause button when clicked. Clicking the..and more link at the bottom of the song samples will open the album s store page in a new tab. Wedgies Image Tag: Depending on the size of the iframe the tag is inserted into, the tag changes dimensions. Hovering mouse over top and bottom of the tag produces a custom scroll feature. Further hovering over the custom scrollbars will move the tag up and down accordingly. Pressing any of the answer buttons will register with the Wedgies poll. After clicking on an answer, if the author allows, the poll will display the results. Video Tag: The video tag is similar to the image tag except for the dimensions. The video tag includes larger size for video embeds. Given that there is more room in video boxes, the video tag includes a larger view of the poll. InstaGrok Image Tag: This tag will pull a preview image for a particular grok. The View in New Window button at the bottom right of the tag opens the actual interactive grok in a new tab. A link is also provided to more information about InstaGrok on their website. Video Tag: Same functionality as image tag except on a larger size. See image tag description. 5
Troubleshooting The tags are designed to support multiple platforms, such as PC, tablet and mobile. However, results are best when tags are viewed using a desktop web browser. Scaling issues may arise when viewing tags in different resolutions. Reloading the tag or switching to a different device will solve this issue. The tags are implemented using ThingLink s backend technologies. If there other issues that arise, contact the ThingLink developers. 6
Frequently Asked Questions What is Thinglink and what do they do? Thinglink is a startup that specializes in adding more interactivity and engaging content to images and videos through rich media tags. How does the Thinglink platform work and what are rich media tags? Thinglink has its own proprietary platform that takes in users videos and images and urls to supported media websites. The platform then extracts information from that website in the form of the rich media tags which users can then insert into specific locations in images or videos. How do I use these tags in my own videos and images? Users can first sign up for accounts on Thinglink s website. Then they can upload their own videos or images to Thinglink s platform. Then users can add an icon in the platform and submit a url into the search box. An icon with the rich media tag for the appropriate website will then show up and users can adjust the media tag as they see fit on the image or video. What happens if there isn t a tag for the website that I want? Any public user can create his own tag and submit it to Thinglink. If you feel like you have a tag you would like to contribute, feel free to create it and send it to them. 7
Contact Information Andy Chen Email: oblchen@ucdavis.edu Eric Ouyang Email: eouyang@ucdavis.edu Giovanni Tenorio Email: gstenorio@ucdavis.edu Ashton Yon Email: aryon@ucdavis.edu 8
Appendix Design Document. 10 Test Document. 18 9
Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio 10
Table of Contents Technology Background. 12 Design Goal.. 13 Architectural Choices and Corresponding Pros and Cons... 15 Selected Architecture.. 15 Implementation Notes. 16 11
1. Technology Background Overview The required technological knowledge for this project involves HTML, CSS, and JavaScript. Additionally, we will be working with the specific APIs for each of the web platforms to pull the desired information as well as integrating our results with the ThingLink API. HTML We will be using HTML 5 to create the actual tags. The HTML will hold the relevant information that our client requests for each tag. Relevant CSS and Javascript libraries will be included in the header. CSS We will be using CSS to add the appropriate format and decoration to our tags as specified in the wireframe design. For example, in our itunes tag we will be using CSS to establish the appropriate font size, background color, text padding, etc. We will be utilizing browser specific syntax i.e: Webkit and moz. JavaScript We will be using JavaScript to interact with the APIs from the web platforms to pull the information. For example, the itunes API returns a JSON object which we will parse with JavaScript to get the appropriate data such as artist name and song title and then save them into JavaScript variables which we will integrate with HTML to put that information onto the media tag. Additionally, JavaScript will be used for implementing dynamic features to our tags such as hover over and scrolling effects. Specific libraries we will be using include Jquery and the Dotdotdot plugin, the latter which allows flexibility with regards to adding ellipsis (...) to truncated text. APIs We will use the itunes search API for the itunes tag. For Wedgies/instaGrok, there are unofficial APIs which requires a licence purchase after a certain number of 12
API hits and/or may not be up to date. Whether or not we use these APIs is subject to change. 2. Design Goal Overview The ThingLink project requires us to create the wireframe of the image and video tags and the build the corresponding web interface. Our ultimate goal is to create the web interfaces of four different tags (Wedgies, Instagrok, Itunes Store, Google Play store) and to integrate them with the ThingLink API. By doing so, the tags will be up on their system and made available for client and public usage. Wireframes In creating wireframes, the team will assess both stakeholder and user needs to create a user interactive and aesthetically pleasant product. Because the tags will be viewed on different platforms, the team must account for screen dimensions, hardware limitations, as well the type of media tagged. For example, if viewed on a computer or laptop, the itunes tag has much more screen real estate to display album and artist info, related albums, as well as song samples. If viewed on a mobile device, the tag may just present a download button, artist and album info. 13
Web Interface To create the web interface, the team will build small web applications using front end web development technology (HTML, CSS, JS) and proprietary APIs. From the Itunes API and the given URL, we can populate the interface with such elements as album information, author information, top albums by the same author, and the view in Itunes button. ThingLink Integration The miniature web application will then be integrated with the ThingLink system. The web app will be input as an iframe using the ThingLink API. These iframes will be available as image and video tags on the Thinglink website that will be available for account holders to use. 14
3. Architectural Choices and Corresponding Pros and Cons Since our project is primarily front end, we don t have many significant architectural decisions to choose from. All of our tags will be in HTML, CSS, and JavaScript. Pros The pros of this design choice are that the tags can be easily implemented into ThingLink s media tag system. Our client can use the code we create and upload them without any major modifications. Additionally, the code will quite simple and easy to understand which will help us for debugging purposes. Cons However, a major con is that we are limited in the different approaches we can take for this project. For example, if we can t obtain the relevant information with proprietary APIs, using python can make web scraping easier but we are not allowed to use python or any backend technologies so we must find alternatives. As a result, we may not be able to incorporate or extract certain information that the client desires. 4. Selected Architecture We decided to use the current software architecture provided to us by the clients. We are to create a wireframe using pure front end, and use the ThingLink api to convert it into a working tag. Because this process has been done before with other tags by ThingLink, we can assure that the process will be smooth after we have developed the wireframes. However, because we can not use any back end programming, we may not have the ability to pull some of the data that our clients are requesting for the tags. 15
5. Implementation Notes Our final product will be HTML files with additional CSS and JavaScript files for each tag. The implementation process will begin with designing the wireframe and determining the information that will be on each tag. Once we have the design agreed on with our client, we will then start working on creating the tags. First we need to get the relevant information, so we will draw information from the web platform s API. If there is additional information that the API doesn t provide or that the client requests, we will discuss with the client on other methods to extract that information or alternative information to be included. ThingLink has specific requests with regards to code implementation and design. These include the following: HTML Content must all be in the HTML document(s). Preferably, both the image tag and the video tag are allowed a single HTML file each. The HTML document will only contain HTML code. Styling and Scripting should be done in separate files and included in the header. Script tags should only contain input variables i.e: <script> var input; </script>. CSS Styling of the document will be handled primarily by the CSS. Images need to be specified by setting the background of a <div> using background image: url( image.jpg); instead of using an image src with <img src= image.jpg ></img>. Javascript Third party libraries are allowed, provided they are free of use. Javascript code should be documented. 16
Once we have all the required information, we will then format it appropriately and add them into the tag. Our client will provide us with consistent design feedback as to whether he approves our implementation or wants certain aspects changed. We can then incorporate CSS for the formatting and design layout for each tag and we can use additional JavaScript to add more animation and effects to our tags that will make them more aesthetically pleasing to the user. 17
ThingLink Test plan Yon Corp. Prepared by A. Andy Chen, B. Ashton Yon, C. Eric Ouyang, and D. Giovanni Tenorio (Who have signed below) For our Clients: Ulla Maaria Engestrom and Alexey Solomatin. Summary of Product(s) to be tested: HTML image and video tag for itunes song albums Using API s, pull JSON object taken from link provided by the user, format and display desired elements on an html tag Contact Info: gstenorio@ucdavis.edu, eouyang@ucdavis.edu, oblchen@ucdavis.edu, aryon@ucdavis.edu Resources required for testing: Internet browser with JavaScript enabled (possibly newest version is needed e.g Mozilla Firefox) Internet Connection Process for defect, reporting & repair: Issues and defects are reported to gstenorio@ucdavis.edu or any of the given emails stated above Issues or repairs are then taken care of within a week or before the next scheduled meeting Confirmation email of the resolved issue or repair request will be sent upon finish by development team 18
Functional Testing Plan: User Identification User Goal Test Id Estimated Time(Devs) Estimated Time (Testers) User Play Demo Song 1 ~30s User User User User Viewing More by this Artist Clicking And More button Clicking Buy on Itunes button Scrolling left and right in song albums 2 ~1s 3 ~1s 4 ~1s 5 ~10s 19
List of Test Cases: User Type Goal Pre Conditions/ Configurations Test Script Checking for correct completion Customer Play Demo Song itunes Server online, customer has link 1. User hovers over song 2. Play button should replace song number 3. User presses play button or song title 4. Song demo starts 5. Playing icon should be present even when hovering out of the song title 6. When song demo ends, play button is replaced again by the song number 7. Hovering outside of a song title while the song has ended or is paused, should show the song number rather than the play button Song demo plays for thirty seconds before the playing icon returns to the form of a song number User Type Goal Customer Viewing More by this artist 20
Pre Conditions/ Configurations Test Script Checking for correct completion itunes Server online, customer has link User hovers over song 1. User hovers over button 2. Button turns a lighter shade of grey 3. User presses button 4. Tag changes to a different format, displaying other songs by the artist 5. When finished, user clicks Back to link on top left to return Clicking button successfully shows other song titles by the artist User Type Goal Pre Conditions/ Configurations Test Script Checking for correct completion Customer Clicking and more button itunes Server online, customer has link 1. click and more button 2. Itunes preview page for the artist collection opens in new browser tab and more button should announce the total amount of songs in the album not included in the tag as well as open the new link in a different tab 21
User Type Goal Pre Conditions/ Configurations Test Script Checking for correct completion Customer Clicking Buy on itunes button itunes Server online, customer has link 1. User hovers over button 2. Button changes color 3. User clicks button 4. User is taken to itunes page to buy the song of album User should be taken to the corresponding itunes page of the song or album with more information and a method to buy song or album User Type Goal Pre Conditions/ Configurations Test Script Customer Scrolling left and right on more albums itunes Server online, customer has link 1. Hover over left most or right most part of more albums region 2. Appropriate left or right scroll icon appears 3. Hover over scroll icon 4. Albums will scroll in direction of scroll icon if possible 22
Checking for correct completion User will be able to browse through the additional albums. Icons will not hinder the view of the albums unless the user hovers over the corresponding areas. 23