6. Tools - mattstras/cs329e-idb GitHub Wiki

Here we will go a bit into detail on the various tools we used to help develop our site.

HyperText Markup Language (HTML) is the standard markup language for web design. HTML provides the structure for a webpage in the form of various HTML elements. With HTML, things like text, images, and links can be embedded into a webpage. HTML can also be used to embed stylings from the language CSS and programs written in the Javascript language.

HTML was developed in the late 1900s by a physicist named Tim Berners-Lee. Berners-Lee was working at CERN and wanted to create a system for employees to share documents. Eleven years after its first conception in 1980, the first publicly available version of HTML (then called "HTML Tags") was released.

We implemented the detail on each website page with html language code. We format various elements of our website including heading, paragraph, image, content alignment, link, table, background color and size of the content. HTML is what provides the basic structure to our website. The HTML determines where elements appear and in what order they appear.

Cascading Style Sheets (CSS) is a style sheet language designed to work with html and xml documents. CSS allows for an html page's structure and style to be separated and changed independently. CSS is used to changed things like color, layout, and font of html elements and enables easy integration of external stylings such as those offered by the HTML, CSS, and Javascript framework called Bootstrap.

We implemented an external CSS file to format various elements of our site design including the nav bar and the tables used on various pages. By doing so, we were able to create a consistent design on these elements for the whole of our site by linking the CSS file. Linking of the css file is done using a simple line of code:

<link rel="stylesheet" type="text/css" href="style.css">

We used properties such as height, background-color, padding, border-collapse to help format the tables and find a style that fit with the style of the site. On each page we used a navigation bar that used the id nav referenced in the style.css file using properties such as height, padding, and text-decoration to help create the style of our nav bar and easily link it to all of our pages.

Various other css implementations were used on a page by page basis to allow for more specific formatting, such as allowing the maps on the states pages to float to the right of the information and give nice breathing room in between.

Javascript is a high-level, dynamic language that works alongside HTML and CSS. Over the history of web design, Javascript has become an integral part of website functionality to the point that it is supported by all modern web browsers without the need for plugins.

While HTML can be used to structure a page and CSS can be used to style it, Javascript has the power to make the page dynamic. HTML offers hyperlinks and buttons, which grants the user basic interaction with the webpage, but buttons and links alone can only redirect the user to different, equally static webpages. Javascript enables the page itself to change based on input from the user.

We used javascript to implement back buttons on the individual about us pages to allow navigation to and from the description pages. This prevents the user from hitting a dead end on these pages and allows them a built in way to go back to the about us page.

Google Maps is a service developed by Google which maps the entire world and allows for dynamic viewing, zooming and route planning and offers satellite imagery, street maps, and 360 degree panoramas. The Google Maps satellite view consists of high-resolution aerial photography near cities and large towns and lower resolution satellite imagery everywhere else on the planet. Satellite imagery is no more than three years old and is displayed using a variant of the Mercator projection. This means that Google Earth does not accurately depict regions near the north and south poles.

Google Maps also offers a Javascript Application Programming Interface (API), making it possible to embed Google Maps into external webpages. The API was launched in 2005 and is free of charge and ad-free. Google Maps API is used by over one million websites, making the most used web application development API currently available.

On the individual state pages, we embedded google maps using an iframe and code provided by google allowing us to display interactive maps of the states. This allows a bit more freedom and information versus just posting a static image of a map. Free api keys from google were required to enable this feature and they have a limit of being accessed 25,000 times per day, which shouldn't be an issue for this project. The code for embedded google maps is found below. The code is the same for each of the pages only differing in place_id and key.

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJr-OEkw_0qFIR1kmG-LjV1fI&key=AIzaSyBZvVXoeKS4TPt-Kw051bdD9hMuMX8DKBY" allowfullscreen></iframe>

Rich Site Summary (RSS) is a technology that utilizes a simple XML structure as well as a variety of standard web feed formats to gather information from external sources and provide up-to-date information from these sources. Typical sources are things like blogs and news outlets, which constantly offer new information. Rather than manually checking these sources for updates, RSS brings the updates into one place.

In order to view the information in a given RSS feed, one must use an RSS reader. Mickle (https://feed.mikle.com) offers a free RSS feed reader that can be easily integrated into any webpage.

On the splash page, we include an RSS reader which displays recent news in politics from five sources; Reuters, CNN, NBC News, and FOX News. The RSS reader has links to external pages which, when clicked, open in a separate tab.

The navigation bar of the website is implemented using Bootstrap. Bootstrap offers HTML, CSS, and JavaScript templates for things like buttons, dropdown menus, navigation bars, and much more. To implement our navigation bar, we used the html template and linked to the external Bootstrap CSS stylesheet and JavaScript. We chose to use the navbar-default navigation bar style. Individual buttons have the nav-pills style and, depending on which page you are on, one of the buttons is given the class "active", which is interpreted by the Bootstrap CSS stylesheet and that button is styled as a colored box with rounded edges.

The code used to link to external Bootstrap open source CSS style sheet and JavaScript files is shown below:

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Namecheap offers a domain for users to store their custom webpages. We use it to create a free domain to host the website we created and it also creates a url for us to get to that website.

For project 5 we were able to link our namecheap domain with our digital ocean server. This prevents all of our site followers and fans we've amassed over the last few weeks from trying to access our website and getting a non existent page.

Flask is a web framework. It provides us with tools, libraries, and technologies that allow us to build a web application. Flask makes it easier to implement certain functionalities to make coding shorter and cleaner. It also provides a safer environment by protecting your website from cross-site scripting. The documentation will also warn you about aspects that might require more attention to security to keep your website better protected from attacks.

First we have to install virtualenv which allows us to create an isolated python environment (virtual environment) and to install only the packages required required for our project without disturbing the base installation of Python. We activate the virtual environment after creating a virtual environment, but we can choose to deactivate the virtual environment. We run and test our web application file (xxx.py) at this virtual environment.

A internet cloud company that provides developers cloud services that help users develop and run applications simultaneously on multiple computers. We first download flask application, move our project directory and clone our project from github to project directory. Then we set up a virtual environment. Then we upload our project directory into the server at digital ocean.