workshops

Posted on February 17, 2015February 26, 2015 by beckyhughes94

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

Posted on February 5, 2015April 19, 2015 by beckyhughes94

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;

PHP

Posted on December 9, 2014February 26, 2015 by beckyhughes94

Index

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

<body>
<div class="container">
<?php $food = array("Chips", "Chocolate", "Fish","Burger"); ?>
<?php $images = array("Cheap-as-Chips", "Yorkie-Bar", "Prod9","img-large-burger"); ?>
<?php $text = array("Chips yum", "Chocolate yum", "Fish mmmm","Burger yummy"); ?>

<?php $title = "Box"; ?>
<?php $numberOfBoxes = count($food) ; ?>

<?php include 'nav.php'; ?>

<div class="top-title">
<h1><?php echo "Home Page - PHP"; ?></h1>
</div>
<?php for($x = 0; $x <$numberOfBoxes; $x++) { ?>

<?php include 'box.php'; ?>

<?php } ?>
</div>
</body>
</html>

Box

</pre>
<div class="box">

<img src="images/<?php echo $images[$x]; ?>.jpg" />

<h2><?php echo $food[$x]; ?></h2>

<p><?php echo $text[$x]; ?></p>

</div>

PHP

Posted on December 2, 2014December 2, 2014 by beckyhughes94

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

Posted on November 11, 2014 by beckyhughes94

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”>

Task 4 – After Effects

Posted on October 30, 2014November 9, 2014 by beckyhughes94

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.

After Effects workshop

Posted on October 29, 2014October 29, 2014 by beckyhughes94

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.

This was my end result

HTML workshop- Basic website design

Posted on October 23, 2014October 23, 2014 by beckyhughes94

I have learnt to create a basic webpage layout using ‘Bootstrap ‘ http://getbootstrap.com/ and also the program ‘Brackets’. This will help me more in my second semester projects, however it is useful to know how to develop a webpage that will be able to open on more than one device and change to fit the selected screen size. Below is the code I used in Brackets.

<!doctype html>
<html>
<head>

<meta name=”viewport” content=”width=device-width,intitial-scale=1.0″>

<title> First HTML page </title>
<!–load stylesheets –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.css” rel=”stylesheet”>

<script src=”js/bootstrap.js” type=”text/javascript”></script>

<script src=”js/processing.js” type=”text/javascript”></script>
<script type=”text/javascript”>
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return ‘becky’; }
</script>

</head>
<body>

<div class=”container”>

<div class=”row”>

<div class=”col-md-4″>
<img src=”image/imgres-1.jpg” />
</div>

<div class=”col-md-4″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
</div>

</div>

<div class=”row”>

<canvas id=”becky” data-processing-sources=”becky.pde”
width=”600″ height=”300″>
<p>Your browser does not support the canvas tag.</p>
<!– Note: you can put any alternative content here. –>
</canvas>

</div>

</body>

This was the outcome of my webpage.

</html>

Coding- Processing task- Java

Posted on October 16, 2014 by beckyhughes94

Today i had to create an array of colours and randomly fill a square with one of the colours from your array when the mouse is clicked.

The code i used
//size of the canvas
//setup
void setup (){
size (600,300);
}

// choice of colours using colour chart
int rColor = int(random(0,7));
color[] myColors ={#B77EC9,#863A7C,#3DE06A,#ED5B22,#EDE322,#FF0527,#05FFFD,#FFF705};
//draw, size and colour of my shape

void draw () {
fill(myColors[rColor]);
size (200,200);
rect(80,80, 80,80);
}
//what happens(colour changes) when mouse is clicked
void mouseClicked (){
rColor= int(random(0,7));

}

If you add more colours you must make sure you change the number in the section mouse clicked to make sure the colours get picked up.