Workshops

Screen Shot 2015-02-17 at 14.31.30

Refining my code

</pre>
<DOCTYPE html>
<html lang=”en”>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#content {
height: 290px;
width:auto;
float:left;
padding:10px;
background-color: white;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div id ="header">
<h1>Pug Rescue and Adoption</h1>
<img style="height: 100px; width:100px"src="image/pug.jpg">
</div>
<div id="nav">
<span><a href="home.htm">home</a></span>
<span><a href="contact.htm">contact</a></span>
<span><a href="adopt.htm">adopt</a></span>
<span><a href="rescue.htm">rescue</a></span>
<span><a href="gallery.htm">gallery</a></span>
<span><a href="donate.htm">donate</a></span>
</div>
<div id= "content">
<h1> Pug Rescue Charity Service </h1>

<img style= "height:150px; width:200px" src="image/pug2.jpg">
<img style= "height:150px; width:200px" src="image/pug2.jpg">
<img style= "height:150px; width:200px" src="image/pug2.jpg">
<img style= "height:150px; width:200px" src="image/pug2.jpg">
<img style= "height:150px; width:200px" src="image/pug2.jpg">
<img style= "height:150px; width:200px" src="image/pug2.jpg">
<img style= "height:150px; width:200px" src="image/pug2.jpg">

<p>Rescue and adopting Pug's. We need your help! </p>

</div>
<div id="footer" >
Copyright of Becky Hughes
</div>
</div>
</body>
</html>

HTML & CSS

Today I have been learning and refreshing my skills on creating a basic webpage layout in the form of a “Pug rescue” page. So far I have been able to apply two images, some text in the form of a header, footer and navigation tags. Although it still does need a lot of editing such as the colours and positioning , this is a good starting point for the new task set. Below is my code so far which I will continue to edit in my own time and a screenshot of my website so far.

&lt;/pre&gt;
&lt;DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id=&quot;header&quot;&gt;
&lt;h1&gt;&lt;b&gt;Pug rescue&lt;/b&gt;&lt;/h1&gt;
&lt;/div&gt;

&lt;div id=&quot;nav&quot; style= &quot;width:auto;height:auto;position:relative; display:inline-block;margin:auto&quot;&gt;
Adopt&lt;br&gt;
Donate&lt;br&gt;
Contact &lt;br&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;img src=&quot;images/pug.jpg&quot;
style=&quot;width:400px;height:400px; position:relative; display:inline-block;margin: auto&quot; &gt;
&lt;img src=&quot;images/pug.jpg&quot;
style=&quot;width:400px;height:400px; position:relative; display:inline-block;margin: auto&quot; &gt;

&lt;p style=&quot;width: 850px; font-size: 1.5em; background-color:#44690&quot;&gt;This is a webpage.Hello! &lt;/p&gt;

&lt;/div&gt;

&lt;div id=&quot;footer&quot; style=&quot;width:100px;height:100px; position:absolute; bottom: 0&quot;&gt;

&lt;b&gt;Pug rescue&lt;/b&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

Screen Shot 2015-02-05 at 12.51.56

PHP

The aim of today was to use the process of PHP to create an individual file, in this case’ box’ so there is a lot less code but the process still works on the webpage. There was an introduction to the % which stands for modular operator.

Below is the end outcome in my index and then my box file.

Index=

<!doctype html>
<html>
<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet” >
</head>

<body>
<div class=”container”>

<?php $title = “Box”; ?>

<?php $numberOfBoxes = 6; ?>

<?php include ‘nav.php’; ?>

<div class=”top-title”>
<h1><?php echo ‘Home Page – PHP’; ?></h1>
</div>

<div class=”clearfix”></div>

<?php while($numberOfBoxes > 0) { ?>

<?php include ‘box.php’ ?>

<?php $numberOfBoxes — ; ?>
<?php } ?>

</div>
</body>
</html>

Box=

<div class=”box <?php if (($numberOfBoxes % 3) == 1) { echo ” box-right”; } ?>”>
<h2><?php echo $title; ?></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img src=”images/beach-huts.jpg” />
</div>

HTML workshop

Today i have been looking further into creating a website, covering the basics again then adding some extras such as how to include website transitions.

Below is some of the code i have used however there are a number of websites which can be useful when learning these new skills which i have included below.

http://www.w3schools.com/css/css3_transitions.asp

http://matthewlein.com/ceaser/

This was the code input in the CSS folder in the programme Brackets;

.container {
width: 600px;
margin: 30px auto;
}

.box-text {
color: #dfd
.box {
width: 170px;
float: left;
padding: 30px 15px;
background: #ef1111;
}

.special-box {
background: #dfdfdf;
}

.box:hover {
background: #49f59f;
color: #de5111;
padding: 50px 15px;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;

}

This is the actual HTML file input ;

<!doctype html>
<html>
<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet”>
</head>

<body>
<div class=”container”>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>

<div class=”box special-box”>

<p>If I don’t format this code correctly, Kyle will be very angry, and it will be hard to know whats going on. <span class=”box-text”>It’s much easier if I keep my markup clean from the start</span></p>
</div>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>
</div>
</body>
</html>

Task 4 – After Effects

The workshop today focused on using a short green screen video and the editing it through after effects. We learnt how to crop down the videos and add affects to the background to make it look like a realistic old styled T.V. We then used the skills we learnt previously to add in some basic text to accompany our videos. Below is the outcome.

This can link to the research I have already done into Kinetic typography. I have also done some research briefly into the history of green screen and when it became popular as well as when it actually began. A useful website to support this research is http://visual.ly/history-green-screen . I was able to find a photograph which sums up the history of green screen nicely.

the-history-of-green-screen_542eabe1240c9_w1500

After Effects workshop

The task today will help towards my Task 4 on Kinetic typography. Using the program after affects i went through each word of “look mum! I’m doing after affects” and changed the position, rotation, opacity and when the word would appear. The most important part of the task was to work backwards, starting from what you want the end result to look like and then moving back in the timeline to edit the word. Below is some screen shots of how i did this.

Screen Shot 2014-10-28 at 13.36.49 Screen Shot 2014-10-28 at 13.42.58 Screen Shot 2014-10-28 at 14.18.15 Screen Shot 2014-10-28 at 14.20.10 Screen Shot 2014-10-28 at 14.41.08 Screen Shot 2014-10-28 at 14.41.15 Screen Shot 2014-10-28 at 14.41.37

This was my end result

Task on programming

Today I have learnt how to do programming independently, reflecting back on what I have learnt in the previous week; such as constructing a circle and then being able to change the colour, the number of circles present and the function of when the mouse is clicked. Below is the actual layout in my program and some screenshots of my outcomes. I found the most difficult part was being able to find any small mistakes I had made then correct them so that the program could run.

int numberOfCircles = 10;
void setup () {
println (“setting up our program”);
size (600,300);
background (0);

}

void draw() {

while (numberOfCircles > 0) {
println(“drawing my circle”);
float circleSize= random(20,60);
ellipse (random(width), random(height), 20, 20);
numberOfCircles–;
fill (random (255), random (255), random (255)) ;
}

}

void mouseClicked() {
background(0);
numberOfCircles = 10;
//what happens when the mouse is clicked

}

Screen Shot 2014-10-09 at 16.38.11 Screen Shot 2014-10-09 at 16.25.31