jrtechs
/
jrtechs-SteamFriendsGraph
mirror of https://github.com/jrtechs/SteamFriendsGraph.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Graph database Analysis of the Steam Network
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 Commits
6 Branches
38 MiB
Tree: ec45c6356a
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ec45c6356a'
${ noResults }
jrtechs-SteamFriendsGraph/website/faq.html

275 lines
12 KiB
Raw Normal View History

Updated nav bars of the website
6 years ago
​
​
​
​
​
​
​
​
​
​
Updated nav bars of the website (again)
6 years ago
​
​
​
​
​
Updated nav bars of the website
6 years ago
Updated nav bars of the website (again)
6 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Updated nav bars of the website
6 years ago
Updated nav bars of the website (again)
6 years ago
Updated nav bars of the website
6 years ago
​
​
Created faq for website.
6 years ago
​
​
​
​
​
​
​
​
Updated nav bars of the website
6 years ago
Created faq for website.
6 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Updated nav bars of the website
6 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Jrtechs Steam Friend Graph Project</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8.     <link rel="stylesheet" href="css/bootstrap.css" media="screen">
  9.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
  13.     <div class="container">
  14.         <a class="navbar-brand" href="#">Steam Graph Project</a>
  15.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  16.             <span class="navbar-toggler-icon"></span>
  17.         </button>
  18. 

  19.         <div class="collapse navbar-collapse" id="navbarSupportedContent">
  20.             <ul class="navbar-nav mr-auto">
  21.                 <li class="nav-item">
  22.                     <a class="nav-link" href="index.html">Home</a>
  23.                 </li>
  24.                 <li class="nav-item">
  25.                     <a class="nav-link" href="graphs.html">Graphs<span class="sr-only">(current)</span></a>
  26.                 </li>
  27.                 <li class="nav-item">
  28.                     <a class="nav-link" href="profile.html">Profile Look-Up</a>
  29.                 </li>
  30.                 <li class="nav-item">
  31.                     <a class="nav-link active" href="faq.html">FAQ</a>
  32.                 </li>
  33.             </ul>
  34.             <ul class="nav navbar-nav navbar-right">
  35.                 <li>
  36.                     <a class="nav-link" href="https://jrtechs.net">Blog</a>
  37.                 </li>
  38.                 <li>
  39.                     <a class="nav-link" href="https://jrtechs.me">Resume</a>
  40.                 </li>
  41.                 <li>
  42.                     <a class="nav-link" href="https://github.com/jrtechs">Github</a>
  43.                 </li>
  44.             </ul>
  45.         </div>
  46.     </div>
  47. </div>
  48. 

  49. 

  50. <div class="container">
  51.     <br><br><br>
  52.     <h1 class="align-content-center">Frequently asked questions</h1>
  53.     <div class="card-group" id="faqAccordion">
  54.         <div class="row w-100">
  55.             <div class="card card-body ">
  56.                 <div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question0">
  57.                     <h4 class="panel-title">
  58.                         <a href="#" class="ing">Q: How do I get my Steam ID?</a>
  59.                     </h4>
  60. 

  61.                 </div>
  62.                 <div id="question0" class="panel-collapse collapse" style="height: 0px;">
  63.                     <div class="panel-body">
  64.                         <h5><span class="label label-primary">Answer</span>
  65.                         </h5>
  66.                         <p>
  67.                             Option 1:<br>
  68.                             If you have steam open, simply click on the profile which you would like to view
  69.                             from your friends list. The steam ID will be in the url that appears in the steam
  70.                             browser.
  71.                             <img src="img/faq/steamIdOption2.png">
  72.                         </p>
  73. 

  74.                         <p>
  75.                             Option 2:<br>
  76.                             If you only know the steam username, you can use steam ID look up sites like
  77.                             <a href="https://steamid.io/">STEAMID I/O</a>. For this website, you will want
  78.                             to use the steamID64 number.
  79.                             <img src="img/faq/steamId.png">
  80.                         </p>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.         </div>
  85. 

  86.         <div class="row w-100">
  87.             <div class="card card-body ">
  88.                 <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
  89.                     <h4 class="panel-title">
  90.                         <a href="#" class="ing">Q: Why did you make this?</a>
  91.                     </h4>
  92. 

  93.                 </div>
  94.                 <div id="question1" class="panel-collapse collapse" style="height: 0px;">
  95.                     <div class="panel-body">
  96.                         <h5><span class="label label-primary">Answer</span></h5>
  97. 

  98.                         <p>Great question, I will get back to you on that one.</p>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  103. 

  104.         <div class="row w-100">
  105.             <div class="card card-body  ">
  106.                 <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question2">
  107.                     <h4 class="panel-title">
  108.                         <a href="#" class="ing">Q: Why is the back end written in Java?</a>
  109.                     </h4>
  110. 

  111.                 </div>
  112.                 <div id="question2" class="panel-collapse collapse" style="height: 0px;">
  113.                     <div class="panel-body">
  114.                         <h5><span class="label label-primary">Answer</span></h5>
  115. 

  116.                         <p>Contrary to popular belief, Java is not a <i>terrible</i> language. For this project
  117.                         I needed something that was easy to work with a Gremlin database -- the tinkerpop framework makes
  118.                         this very convenient. Overall, I needed a backend because I cannot dish out my steam api key to users.
  119.                         Plus, this way I can cache steam friends making graph creation times faster.</p>
  120.                         <img src="img/faq/java.png">
  121. 

  122.                     </div>
  123.                 </div>
  124.             </div>
  125.         </div>
  126. 

  127. 

  128.         <div class="row w-100">
  129.             <div class="card card-body ">
  130.                 <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question3">
  131.                     <h4 class="panel-title">
  132.                         <a href="#" class="ing">Q: Does steam really allow you to do this?</a>
  133.                     </h4>
  134. 

  135.                 </div>
  136.                 <div id="question3" class="panel-collapse collapse" style="height: 0px;">
  137.                     <div class="panel-body">
  138.                         <h5><span class="label label-primary">Answer</span></h5>
  139. 

  140.                         <p>Yes. You can read all about Steam's API usage <a href="https://steamcommunity.com/dev/apiterms">here</a>.</p>
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.         </div>
  145. 

  146.         <div class="row w-100">
  147.             <div class="card card-body ">
  148.                 <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
  149.                     <h4 class="panel-title">
  150.                         <a href="#" class="ing">Q: Can I run my own Steam friend graph server?</a>
  151.                     </h4>
  152. 

  153.                 </div>
  154.                 <div id="question5" class="panel-collapse collapse" style="height: 0px;">
  155.                     <div class="panel-body">
  156.                         <h5><span class="label label-primary">Answer</span></h5>
  157. 

  158.                         <p>Go for it, all the code is on <a href="https://github.com/jrtechs/SteamFriendsGraph">GitHub</a>. I am going to be making a "comprehensive" docs which
  159.                         should explain how to run this.</p>
  160.                     </div>
  161.                 </div>
  162.             </div>
  163.         </div>
  164. 

  165. 

  166.         <div class="row w-100">
  167.             <div class="card card-body ">
  168.                 <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
  169.                     <h4 class="panel-title">
  170.                         <a href="#" class="ing">Q: Why do I not see all my friends?</a>
  171.                     </h4>
  172. 

  173.                 </div>
  174.                 <div id="question6" class="panel-collapse collapse" style="height: 0px;">
  175.                     <div class="panel-body">
  176.                         <h5><span class="label label-primary">Answer</span></h5>
  177.                         <p>Since the server caches all the friend requests in a local graph database, it is possible to
  178.                             not see all your friends if you recently added them. I am working on a solution to this,
  179.                         however, I don't want to excessively hammer the steam API if I don't have to.</p>
  180.                     </div>
  181.                 </div>
  182.             </div>
  183.         </div>
  184. 

  185.     </div>
  186.     <br>
  187.     <center><img class="w-50" src="img/faq/faqGraph.png" /></center>
  188. 

  189.     <br>
  190. </div>
  191. 

  192. 

  193. <!-
  194. ┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
  195. ┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
  196. ╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
  197. ▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
  198. ▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
  199. ╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
  200. ┈╲┈┈▏╭━━━━╯▕▕┈┈┈
  201. ┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
  202. ┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
  203. ┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
  204. ┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
  205. ┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
  206. ┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
  207. ┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
  208. ┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
  209. ┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
  210. 

  211. If you are seeing this monkey that means that you are interested in my
  212. code. Yay!! If you are not here to hack me ... you should really consider
  213. contributing to some of my public projects on github.
  214. 

  215. https://github.com/jrtechs
  216. 

  217. -->
  218. 

  219. <!-- Footer -->
  220. <footer class="text-center">
  221.     <div class="footer-above">
  222.         <div class="container">
  223.             <div class="row">
  224.                 <div class="footer-col col-md-4">
  225.                     <h3>Location</h3>
  226.                     <p>Rochester Institute of Technology
  227.                         <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
  228.                 </div>
  229.                 <div class="footer-col col-md-4">
  230.                     <h3>Around the Web</h3>
  231.                     <ul class="list-inline">
  232.                         <li class="list-inline-item">
  233.                             <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
  234.                                 <i class="fa fa-fw fa-youtube"></i>
  235.                             </a>
  236.                         </li>
  237.                         <li class="list-inline-item">
  238.                             <a class="btn-social btn-outline" href="https://github.com/jrtechs">
  239.                                 <i class="fa fa-fw fa-github"></i>
  240.                             </a>
  241.                         </li>
  242.                         <li class="list-inline-item">
  243.                             <a class="btn-social btn-outline" href="http://jrtechs.net">
  244.                                 <i class="fa fa-fw fa-wordpress"></i>
  245.                             </a>
  246.                         </li>
  247.                     </ul>
  248.                 </div>
  249.                 <div class="footer-col col-md-4">
  250.                     <h3>About This Website</h3>
  251.                     <p>Check out the source code for this website on my
  252.                         <a href="https://github.com/jrtechs">github</a>.</p>
  253.                 </div>
  254.             </div>
  255.         </div>
  256.     </div>
  257.     <div class="footer-below">
  258.         <div class="container">
  259.             <div class="row">
  260.                 <div class="col-lg-12">
  261.                     <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
  262.                         document.write(new Date().getFullYear());
  263.                     </script> Jrtechs</p>
  264.                 </div>
  265.             </div>
  266.         </div>
  267.     </div>
  268. </footer>
  269. 

  270. 

  271. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  272. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  273. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  274. </body>
  275. </html>