me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update GCSE CS blog

Browse Source
This commit is contained in:
Matthew Grove
2018-12-07 13:38:12 +00:00
parent 7695f54ac6
commit bf02130a75
8 changed files with 162 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/global.css
View File

@@ -1,7 +1,9 @@
/* change them */
:root {
/* change theme */
--mdc-theme-primary: #00adb4;
--mdc-theme-secondary: #d84315;
/* ensure Bootstrap doesn't alter any font sizes set in rem */
font-size: initial;
}
/* implement colour theme on elements that don't have it applied by default */
@@ -11,6 +13,9 @@
.mdc-fab {
background-color: var(--mdc-theme-secondary);
}
.material-icons:hover {
text-decoration: none;
}
/* hide unwanted overflow from mdc-text-field :before & :after */
.mdc-text-field-container {

37
computer-science-blog/css/main.css
View File

@@ -1,4 +1,7 @@
/* Reading School 2018, CSS*/
.carousel-inner {
height: 500px;
}
.carousel-inner .item {
height: 100%;
}
@@ -7,30 +10,34 @@
border: none;
height: 100%;
}
.carousel-indicators {
background: black;
.carousel-indicators li {
border: 1px solid var(--mdc-theme-secondary);
}
.mdc-top-app-bar--fixed-adjust {
.carousel-indicators .active {
background-color: var(--mdc-theme-secondary);
}
.presentation-button-left {
float: left;
}
.presentation-button-right {
float: right;
}
#main-content {
text-align: left;
margin: 0 15%;
margin: 20px 15%;
}
@media screen and (max-width: 1000px) {
.mdc-top-app-bar--fixed-adjust {
margin: 0 10%;
#main-content {
margin: 20px 10%;
}
}
@media screen and (max-width: 800px) {
.mdc-top-app-bar--fixed-adjust {
margin: 0 5%;
#main-content {
margin: 20px 5%;
}
}
@media screen and (max-width: 600px) {
.mdc-top-app-bar--fixed-adjust {
margin: 0 2%;
}
}
@media screen and (max-width: 400px) {
.mdc-top-app-bar--fixed-adjust {
margin: 0 1%;
#main-content {
margin: 20px;
}
}

84
computer-science-blog/index.html
View File

@@ -34,14 +34,14 @@
<!-- import cookie JavaScript -->
<script src="/assets/cookies.js" type="text/javascript"></script>
<!-- import Bootstrap -->
<script src="/assets/bootstrap.min.js" type="text/javascript"></script>
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import Material Design components & icons -->
<link href="/assets/material-components-web.min.css" rel="stylesheet" type="text/css">
<link href="/assets/material_icons.css" rel="stylesheet" type="text/css">
<script src="/assets/material-components-web.min.js" type="text/javascript"></script>
<!-- import Bootstrap -->
<script src="/assets/bootstrap.min.js" type="text/javascript"></script>
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<script src="/assets/global.js" type="text/javascript"></script>
@@ -71,48 +71,64 @@
<header class="mdc-top-app-bar app-bar" id="app-bar"></header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--fixed-adjust">
<p>The current date is: <span id="current_date">unknown</span></p>
<div class="mdc-top-app-bar--fixed-adjust">
<p>The current date is: <span id="current_date">unknown</span></p>
<div id="blog-insert"></div>
<h1>_____AREA_OF_STUDY_____ Presentation</h1>
<h1>HTTP Introduction</h1>
<div id="presentation" class="carousel slide" data-ride="carousel">
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--<div class="item">-->
<!-- <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
<!--</div>-->
</div>
</div>
<div class="presentation-buttons-container">
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
</div>
<!-- HTML presentation -->
<h1>HTML, CSS & JS Introduction</h1>
<div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#presentation" data-slide-to="0" class="active"></li>
<li data-target="#presentation" data-slide-to="1"></li>
<li data-target="#presentation" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="height: 500px;">
<div class="item">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
<div class="carousel-inner">
</div>
</div>
<!-- button to go to previous slide -->
<a class="left carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</a>
<!-- button to go to next slide -->
<a class="right carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</a>
<div class="presentation-buttons-container">
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
</div>
<!-- link to source code on GitHub -->
<a href="https://github.com/mgrove36/demo-code/blob/master/computer-science-blog/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
</div>
</div>
</main>
<footer>
&copy; Matthew Grove 2018

19
computer-science-blog/pages/cookies.html Normal file
View File

@@ -0,0 +1,19 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<!-- styles -->
<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
<!-- scripts -->
<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
</head>
<body>
<h1>Cookies</h1>
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, usually one-line long, which store relevant information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use cookies to store passwords that are set to ‘remember’. Thus cookies need a lot of security and the id of each one must be unfathomably difficult to find without permission so that hackers cannot find someone’s cookie. Cookies are stored on the computer, as opposed to the website. Whenever you visit a browser, the browser accesses the relevant cookie and your information is there. Also, whenever a website uses cookies, they must announce the fact and give an option to refuse them, for data privacy/security reasons.
</body>
</html>

19
computer-science-blog/pages/http.html Normal file
View File

@@ -0,0 +1,19 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<!-- styles -->
<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
<!-- scripts -->
<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
</head>
<body>
<h1>HTTP</h1>
HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web. It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests, the server and request must both follow this protocol.
</body>
</html>

5
computer-science-blog/pages/page_1.html → computer-science-blog/pages/https.html
View File

@@ -13,8 +13,7 @@
<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
</head>
<body>
<h1>Page 01</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>END</h1>
<h1>HTTPS</h1>
HTTPS is the secure hypertext transfer protocol, which means that it is a variation on the HTTP protocol - except it uses a secure socket layer (SSL), which is an encryption protocol invoked by an HTTPS request. SSL is essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or ‘miscommunicated' data, because this increases security.
</body>
</html>

23
computer-science-blog/pages/hyperlinks.html Normal file
View File

@@ -0,0 +1,23 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<!-- styles -->
<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
<!-- scripts -->
<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
</head>
<body>
<h1>Hyperlinks</h1>
A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
Some website owners wish to reserve the right to not be hyperlinked without permission.
Creating a hyperlink in html:
<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
</body>
</html>

32
computer-science-blog/scripts/scripts.js
View File

@@ -39,22 +39,32 @@ window.onload = function() {
// display date
$("#current_date").html(current_date);
// define variables for blog pages
pages = ["pages/page_1.html"];
var page_exists = true;
var page_number = 1;
// gets all blog pages and add them to an array (pages[])
pages.forEach(function(item, index) {
// define variables for HTTP presentation pages
http_pages = ["pages/hyperlinks.html"];
// displays HTTP presentation pages
http_pages.forEach(function(item, index) {
if (index == 0) {
$(".carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
$(".carousel-indicators").append('<li data-target="#presentation" class="active" data-slide-to="' + index + '"></li>')
$("#http_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
} else {
$(".carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
$(".carousel-indicators").append('<li data-target="#presentation" data-slide-to="' + index + '"></li>')
$("#http_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
}
});
// define variables for HTML presentation pages
html_pages = ["pages/page_1.html"];
// displays HTML presentation pages
html_pages.forEach(function(item, index) {
if (index == 0) {
$("#html_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
} else {
$("#html_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
}
});
// displays first blog page
window.current_blog_page = 0;
$("#blog-insert").load("pages/blog.html");
}