HTML and CSS – Twitter Bootstrap

The Bootstrap framework allows us to create responsive websites or web apps. Furthermore, Bootstrap comes with many components and widgets, and we are provided with sample code at getbootstrap.com.

Below is a starter template:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <title>Bootstrap - DHS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- This line tells the web page to resize according to the size of the device -->
    <!-- Bootstrap -->
   <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" 
media="screen">
     <!-- loads the style sheet for bootstrap -->
  </head>
 
  <body>
    <h1>Hello, world!</h1>
 
   <script src="http:http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <!-- loads the javascript file that is used by many of the bootstrap components -->
  </body>
</html>

Bootstrap uses a grid layout to organise the appearance of the web page or web app. You can view diiferent examples of using the grid layout at getbootstrap

Have a look at an example below:

1
2
3
4
5
6
7
<div class="container">
  	<div class="row">
                 <div class="col-md-4">
                 <!-- place your components here or any html code -->
                 </div>
        </div>
<div>

The grid system works by providing twelve columns per row. For example, if you want three equal columns you would use the class ‘col-md-4’ three times. Furthermore, you can split the columns into unequal amounts such as ‘col-md-8’, col-md-2 and col-md-2.

Playing around with the different column sizes and positions is recommended.

Codecademy – jquery

We are going to cover the jquery module from codecademy. This will provide you with a basic understanding on how to use jquery and integrate it into your webapp.

Complete:

Quick guide to terminology

  • An element is HTML tag such as <p>, <h1> or <ul>.
  • Each element can have an id e.g. <p id=”firstParagraph”>. This allows jquery to target a specific element rather that just all <p> elements.
  • When an event is triggered the following jquery code could be executed:

         $(“firstParagraph”).html(“This is Higher ComputingScience”);
         $(“secondParagraph”).append(“This is the new content.”);

Introduction – Javascript

Javascript – jquery

Javascript allows the developer to add interactive and dynamic elements to a website or web app. Javascript is one of the most popular scripting languages used for the web. We are going to use jquery, which provides a simple way to integrate javascript into our web app. Also, jquery provides us with functions that allow us to alter the contents of any HTML code.

After you have acquired a certain set of skills…

Below are links to tutorials that will show you how to develop some more games/apps using app inventor 2. All worksheets must be completed first:

  • Android Mash –  A version of mole mash.
  • Paint – create a simple paint app.
  • Space Invaders – Create a simple space invaders game.
  • Pong – one paddle at the bottom of the screen. One goal – stop the ball from hitting the bottom of the screen. 
  • Todo List – Create your very own todo list to help organise your life.
  • Virtual Pet – Create a virtual pet.
  • Magic 8 Ball – Predict your future.
  • Sharing – This app shows you how to use the ‘Sharing’ component.
  • Fidget Spinner App – Watch the youtube video below.

Task 3 – Text Based Adventure Game

For this task you are required to use all of the skills that you have acquired to construct a text based adventure game. The idea behind a tba game is that the user should be asked  questions and depending on their response, something will happen. You have to let the user know where they are and where they can go. Some of the rooms will contain an item such as a key, treasure or a person.

Criteria:

  • Use a list to create 4 rooms that can be explored.
  • You will have to use a series of if statements to determine where the user can move and if they pick up an item.
  • All items should be stored in a list.
  • There must be a way of completing your game. You can decide how.
  • I have tried to keep this as open as possible so you can design and implement your way.

Good luck and quest well!

Download the starter template.

 

Web Authoring – Task 2

You may still be adding content to your website.

This task really covers a few extra things that you need to have a look at to get your web site up and running.

  1. Set a static front page rather than having a list of posts. Obviously, if your web site is a blogging site then you do not have to change this setting.
  2. Create and maintain a menu.
  3. Using widgets in your site.

Web Authoring – Task 1

You need to think of a topic that you will design your website on:

  • This can be a shop.
  • An Information site.
  • A fan site.

You need to design your website on paper first,  by folding an A4 sheet of paper into 8 sections. Your site should have a minimum of 4 pages.

Then….

  1. Get logged in.
  2. Choose your theme (Appearance>Themes).
  3. Setup up each of your pages before adding any content.
  4. When adding content, use the page builder as demonstrated.