Tag Archives: art

Ermm…. jQuery … why, what?

Hello and welcome back,

Painting… colours… so beautiful. Art however has multiple forms. Let’s look at metalworking or carpenters. They also build beautiful things but they also build tools that help them. Let’s say that we want to build a chair and we have only a saw blade. How… we can try to cut directly but we better get ourselves a cutting table first. Nice, now we can cut way better. We should also make some kind of tool first that allows us to cut straight lines without cutting our fingers… yea, that would speed things up.

See, in order to reach our goal easier, to deliver something that looks better and is safer we have build ourselves a “framework” composed by different tools that we mix together for the end result.

That is jQuery. It is a framework for JavaScript. It does everything that JS does but much more, much easier and with less code.

What’s better, just like with the wooden pieces, we can always use either JS or jQuery in any moment as we see fit.

Like when we were building our wood cutting framework, we need to do a bit of setup and building first.

How can we make jQuery work for us?

  1. Search on the internet for “jQuery CDN” or go to http://code.jquery.com  – CDN = content delivery network. It means that some computers around the world have the file and you will get it the fastest from the closest computer to you.
  2. Select the newest version – minified if possible.
    Minified = the smallest possible from which you cannot understand anything but works perfectly.
    Uncompressed = the version that also has the code visible. It also works perfectly.
  3. Click on it
  4. In the HTML file write
    <script type=”text/javascript” language=”javascript” src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>  where the last part “http://code.jquery.com/jquery-2.1.4.min.js” is the URL you got on point number 3
  5. Save the HTML file and refresh

Now, this is how we add jQuery into our HTML. Note that we already this this with our JS and CSS files previously. As stated above, jQuery is not something super super complicated. It is just some JS code written by a team which allows us to write less and do things faster.

How to play with an element?

Let’s use the same JS code as above document.querySelector(“#first_leaf”) and we will change it’s colour just to see that the code works. Let’s add .style.backgroundColor=”red” to our JS selector. Finally, the code will look like this

document.querySelector(“#first_leaf”).style.backgroundColor=”red”;

We can observe here that JavaScript uses the “.” to navigate between the available functions of each function. Note that in the last sentence the word function has been used twice. It is not a mistake. JavaScript is a language based mostly on functions. At the end of the functions there are properties and those properties accept values. Exactly in the same way as the CSS accepts values for its properties. Do you remember how we have said that HTML is mostly based on tags. Same concept, just a different language.

Since we know that jQuery will help us write less but achieve the same result we can write the above code as:

window.jQuery = window.$ = jQuery;
$(“#first_leaf”).css(“backgroundColor”,”red”);

The first line of text is the preparation required that we spoke about previously. From now on, jQuery will be represented by the “$” sign.

The second row is us sending our CSS selector to jQuery and when the results comes back asking jQuery again to change the background colour of our element to red.

Tomorrow we will learn how to see if jQuery works and where we can see the errors because it would be really difficult to create anything without knowing if it works or not. It like painting as a blind man.

Take care,
Gabi

JavaScript functions

Hello and welcome back,

Sadly today’s article will have to be a bit more technical because it is one of the key things of JavaScript. If you understand this you can literally read any JS book and start looking for a job.

One of the particularities of JS is the fact that it relies on functions. In the lesson How does JavaScript functions we have learned that the JS code is read once, from top to bottom and everything that it is read it is executed. Now… this is great and not so great in the same time.

Why not so great?

When we paint together, among the things that we should do is sell the painting. What if after I hand you the colours I go and sell the painting? That would be stupid, that would totally ruin our team work.

This is why we should not rely our JS code to do everything when it is read.

Why is great?

Let’s consider that we work on the painting, I give you the colours and then I wait long enough for you to finish. Then we sell it. This is great, this is how it should be done… but… it has happened like this by luck. If I would have waited less it would have been too soon. If I would have waited longer we would have been stuck. So, this is great but not so great.

How can we stop this from happening?

Functions.

Instead of placing all the code in the file and make it look like this:
draw the horizon line
draw a tree
paint the sky with blue
paint the bark with brow
….
sell the painting

Let’s make it somewhat like this:

function draw_sky(){
if the horizon line does not exist draw it;
paint the sky in blue;
}

function draw_tree(){
draw a tree;
paint the bark with brow;
….
}

function sell_painting(){

}

This will split our code into functions and although the functions are read by the browser when they are received they are not run until we call them. What’s even better is the fact that we can dictate the order very easily.

Between

function draw_sky();
function draw_tree();
function sell_painting();

and

function draw_tree();
function draw_sky();
function sell_painting();

it is just a line changed. What’s even better is that now we can draw 2 trees without copying everything again! Just imagine how easy it is to just call functions to do the work wherever you need them to.

function draw_tree();
function draw_tree();
function draw_sky();
function sell_painting();

But where do we actually call them?

Now that’s a great question! There are multiple answers to this question:

  1. In HTML when an action is performed, like this:
    <div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
    The onclick is called an event. More events can be found here.
  2. When the page is loaded. This is more difficult to understand but easier to use. What we need is something that embraces our code and knows what to call for when the user performs events on the HTML tags used. We will call this thing “jQuery”.

Practical example:

  1. In the JS file write only the following code
    function draw_tree(){
    alert(“I don’t know how to draw a tree but I have this nice message”);
    }
  2. In the HTML file replace <div class=”red leaf” id=”second_leaf”>second leaf</div> with <div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
  3. Save both files, refresh and click on the red leaf.

Tomorrow we will learn the difference between a function and a property.

Gabi

Animations

Heya!

Colouring elements is quite cool, but animating them… whooaaa, a whole new level. We can do things like the cool kids.

Before we dig in a bit deeper we should have in mind that there are 2 types of animations. One is made by CSS 3 and one by JavaScript.  Now don’t get scared or intimidated by the “3”. There is nothing different from CSS 1 and CSS 2 (which did not really exist). The 3 means that some new attributes have been added and the browsers know what to do with them.
Do you remember how in the first lesson we were saying that the browser is stupid. Well, payback time, the browser is not THAT stupid. The browser knows how to read the CSS, link it to HTML and draw everything on the screen but since different companies create

Basic difference between the two comes in terms of what the browser knows what do with that bit of code.

JavaScript animations:

  1. Are drawn much better in the same way on all the browsers
  2. Can have more advanced way of controlling the animation
  3. Slightly slower then CSS

CSS 3 animations:

  1. Can look slightly different on a browser or another
  2. Simple to use, very good for buttons or things that don’t move away
  3. Faster then JavaScript

Now that we know about the differences next time we will learn a bit about JavaScript animations.

Take care,
Gabi

Adding colour

Hello and welcome back,

In our previous article we have discussed about how to create our HTML and CSS documents and how to make sure they are working.

In this post we found out about classes and ids. Let’s put them to work!

In the HTML our example we have this line saying “<div class=”green leaf” id=”first_leaf”>first leaf</div>”.

We know that a tag can have as many classes as we want it to have and that those classes are put into different stacks. In order to add classes to a tag we need to write the word “class” after the tag’s name. Right after we add the “=” and between double commas we can add all the class names we want. There are no standard names and it does not matter how they are being called. We name them as we want. They are all split by space. So, in our example, our div tag has 2 classes “green” and “leaf”.

We also know that an element can have only 1 id and it needs to be unique. Like the class, we have to write “id=” and then between double commas the name of the id. Same as with the classes, it does not matter the name.

This is also a good time to learn that the word “class” and “id” are named “attributes”. There are way more but those are the ones we know.

Let’s open our HTML editor and our CSS file.

Here, in order to point to a class we use the “.” sign and in order to refer to an id we use “#”.

Let’s make all our green elements truly green.

  1. Put the following text into the css file
    .green { background-color: green; }
  2. Save the file
  3. Open the HTML file in your browser or refresh the page you already had opened
  4. Be amazed!

All our div elements that had the class “green” actually became green.

The “background-color” it is called a property. and the “green” after the “:” sign is called the value of the property.

Let’s do something with the id as well.

  1. Put the following text in the css file
    #first_leaf{color:white;}
  2. Save the file
  3. Refresh the web page

Notice that the text has turned white. This is quite nice!

You can list multiple CSS properties one after each other and delimit them apart by “;”. For instance, let’s put a black border around all the tags with the green class.

  1. Add border: 1px solid black; inside the “{” “}” of the tags from the green class.
    Now it should look like
    .green {
    background-color: green;
    border: 1px solid black;
    }
  2. Save and refresh

Note how we can split the CSS properties on multiple lines and how we can add as many as we want. On border we did cheat a bit, we have added 3 values to the border property in the same time. This was done just to see that it is possible.

For WAY more information about CSS properties please use http://www.w3schools.com/css/css_intro.asp and make sure you do not click on any of the commercials they have.

Play with it, break things and try to fix them back. Learning is all about experimenting.

You can learn more about HTML tags here http://www.w3schools.com/html/ . Again, make sure you don’t click on the commercials, you do not need any certification, quiz, class etc. Just select from the left menu the tags and read about them.

Next time we learn a bit about animations.

Take care,
Gabi

Drawing for the first time

Yo reader, how are you today?

Two lessons ago we have discussed how we can include our CSS file in the HTML tree. Last lesson we have discussed how the browser knows which colours and distances to apply to which element. Also we found out how to ease his job by knowing when to use a class and when to use and id.

Today we will re-use the example from HTML Tree and tags . We will create a few leaves for our HTML tree and colour them a bit.

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
</head>
<body>
<div class=”green leaf” id=”first_leaf”>first leaf</div>
<div class=”red leaf” id=”second_leaf”>second leaf</div>
<div class=”green flower”>very very small flower</div>
</body>
</html>

Before actually writing some CSS I will take some time and explain all those “div” branches of our tree.
Let’s do this exercise:

  1. Take a piece of paper.
  2. Cut it in 3. Do it!.
  3. Take a second piece of paper.
  4. Put the 3 parts on top of it.

The “div”-s for HTML are exactly as the papers are for you. They are transparent, one with the background but they exist there to hold information for you.

Let’s do the following exercise:

  1. Take the first small piece of paper and write class=”green leaf” id=”first_leaf” on it
  2. Take the second small piece of paper and write class=”red leaf” id=”second_leaf” on it
  3. Take the third small piece of paper and write class=”green flower” on it
  4. Flip the first piece of paper and write on it first leaf
  5. Flip the second piece of paper and write on it second leaf
  6. Flip the third piece of paper and write on it very very small flower
  7. Put them back on the big piece of paper with the text upwards. Not the “class” and “id” non-sense, but with the nice human readable text.

Great job! This is what your browser sees.

Now we are ready to write our CSS file. Let’s play again:

  1. Open your program with which you write text. If you are unsure what I mean please go to http://www.sublimetext.com , download, install and start this program. From now on this is our HTML editor.
  2. Write into the HTML editor all HTML code from above.
  3. Save the file into a directory/folder that you want and name the file “html_file.html”
  4. Get back to sublime and go to File, New file
  5. Save this new empty file into the same directory/folder as the “html_file.html” file and name it “mystyle.css”

That was all! Now you have your very own website. Yes, it takes some more work to make it visible to other people but you can see it locally by:

  1. Go to the directory/folder you have used previously to save the html and css file
  2. Double click on “html_file” or drag it on top of your browser

That’s all, if all went fine you should be able to see the text of your leaves in there. They should have the same text as your small pieces of paper. You see the resemblance now. The browser does no magic tricks. He just reads everything and splits the information is 2 piles. Information for him and information for you. Same as you pieces of paper. Information for the viewer, the nice text, and information for the programmer, the classes and ids from the back of the pieces of paper.

Next time we will write some CSS code to make things pretty.

Take care,
Gabi

 

 

Sprinkle magic dust over HTML with CSS

Hey hey hey!

This time we learn what to write into the CSS file to make it work. Uhh yea!

Before going a bit more into details let’s try to imagine how the linking between the 2 documents can function.

Let’s use http://corioblog.com/Mondrian.jpg as an example.

Selecting an element:

  1. Let’s look at the square with thick black border positioned from the top underneath first row of white rectangles, the big red one. This was a bit slow and we are happy for the red colour, otherwise it would have been even slower. This is one way of writing a CSS selector, based on the elements that hold it.
  2. Another way is if we put a number in each square, from the upper left corner to the upper right corner. Now we can say that we talk about the square number 5. This was way faster. This called an “id”. Each “id” must be unique, else we ruin all the speed and idea. An HTML tag can have 1 id.
  3. Let’s try to locate the element which has “square black”. It went quite as fast as the “id”, maybe a bit slower, but still way faster then the first solution. This is called a class. An html tag can have any number of classes. The more they are the slower it becomes to knowing which one we select.

Adding a style to an element:

We have seen how selecting elements work, which is the fastest and which is the slowest. Let’s imagine how paining would work if we imagine ourselves as browsers. We will ignore the first try of selection because it is plain stupid to work like that.

  1. Apply a border to the tags with id 1,2,3,4,5,6,7,8,9…19,20. This looks quite slow because you always have to go back and see if the tag with a specific “id” needs to have the border painted or not.
  2. Apply the border to all the tags with class “black”. Hm…. this looks super fast if you already have all the tags split in piles. All the ones with “black” in the “black” pile. All the “squares” in their own pile and all the “rectangles” in the “rectangles” one.

This is how the browser finds tags and paints tags. We can easily see why the “id” is faster to find and why the “class” is faster to paint.

Next time we will add some colour to our small piece of HTML from the previous lessons.

Have a good one,
Gabi

How to link CSS to our HTML?

Welcome back to a new discussion,

In the previous lesson we have learned that the CSS is a file which holds all the information required by the browser to colour our HTML beautifully.

Let’s go back to our tree. We have learned in the article about the HTML tree and HTML tags that the “head” html tag can hold some information that will help us to describe a part of the identity of our tree. Now we will find out that inside the head element we can call for our CSS with:

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

The link element is more special. It does not have a closing “</link>” because it cannot hold any “leaf”. It just tells the browser that in this HTML document there is a link to a CSS file which should be fetched as well.

Let’s use the same example from what is HTML and include our own CSS file.

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
</head>
</html>

Next time we will find out how the browser makes the connection between what’s in the CSS and what’s in the HTML file.

Have a good one,
Gabi

What it is CSS?

Hello reader,

CSS is a file with text in it. This text will help us give shape and colour to the HTML tags.

Remember how in the article about what is HTML we have said that:

This infinite piece of paper is the HTML. It has no specific colour, shape, size, nothing but it can have everything if we make it have.

  1. Let’s imagine that you need to document your painting so that it can be reproduced by anyone who has no skill. In the end we do know that our browsers have no understanding or knowledge of anything.
    writing_inside_image
    Look at that. It is quite ugly and hard to understand because of all the text. Mona Lisa would look quite terrible.
  2. When you are trying to copy a drawing imagine how long it would take if I read all that information for you. Try to read the following lines 1 by 1 and imagine the shape. I bet it will take over 1 second:border width: 10 points
    border colour: black
    width: 135 points
    height: 70 points
    left corner: 59×77 points
    right corner: 209×159 points
    transparent filling. Now you know everything there is to know for the first shape and you can draw it! Took us a while but it was not impossible, just slower.
  3. The order of the information matters. If in the previous example I had given you the left corner on the 3rd position, you could have put the pencil in that point and wait for more information. You knew already that the border is black and that it is 10 points thick. You could have had the 10 points black pencil in your hand waiting for the starting point.

To conclude our lesson:

1) What is CSS?
It is a document where we store all the information related to the layout of our HTML tags.

2) Why is it better to put this information in a separate file?
The browser will receive this file in the same time as our HTML file. This makes everything faster and will be able to arrange the information in the desired order because it knows that inside the CSS file there will be only information related to styles.

Next time we will learn how we can tell the html page to take the css with it when it leaves towards the user’s browser.

Have a good evening,

Gabi

HTML Tree and tags

Hey,

this HTML thingie can easily be viewed as a tree because that’s what it is. It has a root, a trunk and many many branches. As many as we want, with many many leaves, as many as we want. Some branches are better at different things such as providing shade, collecting sun rays allowing us to build a swing chair or a tree house.

Let’s think about it a bit. When the tree is really really small, it has only 1 branch and 1 leaf. When it grows a bit it becomes thicker and it gets to have a second branch. Right now we can call the first one a trunk.

The leaf is what we see on the screen. The branch is what is behind the leaf, in the back, which is not visible. Pretty much like in this image.

leaf

The branches start from a bigger branch and end with a leaf. In HTML the tags start with <, then comes the name of the tag and then comes >. Inside the tag we have our leaves or other branches. We can have anything we want here. Then we must specify when the tag finishes. To finish it we have </, then comes the tag name, then comes >.

The biggest problem in translating a tree on a piece of paper is the lack of depth. So we need to read everything from bottom left to top right and from bottom to the top.

Let’s see again the slightly modified example from the previous lesson:

black-and-white-tree-with-roots-clipart-429-tree-branches-and-roots-design

First we have the “html” tags that define where the page’s code starts and finishes. We need this because what is outside of it is not taken into consideration.

Think of the doctype as the root of the tree. It is what it makes it alive and defines it as it is. If the root says it is HTML, that’s what the browser will draw. You can read more about what the root’s options here .

Then comes the “head” element which can be seen as what’s beneath the earth but on top of the root. It can tell the tree about some characteristics but it is not the root which defines the tree.

Right after “head” comes “body”. Body is the trunk. Inside the body we find everything else.

div-leaf

Inside the body, as we look from left to right, we have a branch. Our branch holds a leaf. We only see the leaf but we should have something to link it from the trunk. This linkage in our case is the “div” tag.

Inside the “div” tag we have our very own text. This text is the only thing visible to the user.

As an exercise try to look at a tree outside. Comment how you would imagine the HTML structure and I will help you out getting it properly.

Have a good evening,

Gabi

Web browsers

Web browsers

What is a web browser:

A web browser is similar to a painting’s frame. Very similar to that. Just like the frames, they do not do any magic for the painter or for the tableau. They just help the painter expose his art where he wants to.

The frames can have many shapes. Like in the following image. Sadly, in comparison to the following image, the shape of the frame is up to the user. The artist can only try to make his work target the desired audience and hope that everything will work out nice in the end.

IMG_20151017_155259.jpg

Some frames have a glass window in the middle as the top layer. That window may have imperfections or shades. If an artist knows about them in advance he/she can use them to improve the paining or to cover them.
In the following series of images there is a black string on the lady’s eye. Look how, by knowing where the string is, the artist can manipulate the image and either hide it or reveal it.

IMG_20151017_153959.jpg IMG_20151017_154010.jpg IMG_20151017_154015.jpg

The artist is the one who positions everything visually based on his/her liking.

Technical part:

The web browsers are the programs we use every day to view pages. You might have encountered at least one of them if you are reading this text. Here are some examples: Chrome, Google Chrome, Mozilla Firefox, Firefox, Internet Explorer, IE, Opera, Safari.

Anything that you are using in order to view pages is a web browser and, as we have learned above, it is just a program which you ask to get a page for you and paints it on your screen based on how they have been programmed to. You have no control on how they have been programmed. You can only learn about their specific things and design with their minor differences in mind.
We will talk a bit more about those differences in a later article when we will learn more.

For today, just understand that:

  1. A web browser is a “stupid” program that paints on your screen what another person designed based on how the browser is programmed to.
  2. We will learn later on how to figure out which is the target audience and there are tools which can help us figure what browsers they are using.
  3. The web browser is not the internet. We will learn next time what the internet is. Just imagine it like the paining the frame. The paining is the internet. The frame is the web browser. A frame can fit any paining and if the paining is too big we find ways to make it fit.

Have a good one,
Gabi