Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio
Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding Pros and Cons...4 4. Selected Architecture...5 5. Implementation Notes...5 1
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 API hits and/or may not be up to date. Whether or not we use these APIs is subject to change. 2
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. 3
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. 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
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. 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>. 5
Javascript Third party libraries are allowed, provided they are free of use. Javascript code should be documented. 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. 6