Share on Twitter!

Monday, August 28, 2017

Welcome to Digital Web Media! Today we’ll spend some time getting to know each other, reviewing the course outline, and looking at some examples of online infographics and animations.

Wednesday, August 30, 2017

We’re going to be getting to know the browser console a bit today, also sometimes referred to as the inspector. If you’re on a Mac, here’s how to access it. On a PC, just hit the F12 key on the keyboard.

The main part of the console shows you the code of the page you’re on, and the elements that make it up. We can click on and delete an element, or double-click to edit it. You can actually transform the page’s elements. Of course, this doesn’t make an actual change to the website, just how your browser displays it to you.

The smaller part of the console shows the various bits of CSS that effect whatever element you are currently looking at. These can also be manipulated.

We’ll be learning a lot more about this later on, but for now, just note how what we see on a website is generated by the web browser from the code it receives.

To get an idea of how we can edit code, download this file to your computer by right-clicking on it and then selecting “Download Linked File” (note: it may say something different but similar on different browsers). If you then find the downloaded file, you should be able to open it and see a web page. Now, right click on the same downloaded file, select “open with”, and then choose “Brackets”. Now instead of a web page, you will see the code that the browser reads to display the same web page.

In the code, notice all of the “<” & “>” characters. They are called “less than” and “greater than” symbols, and they wrap around what are called “tags”, which are the building blocks of HTML code.

Now, for the assignment today, we will practice writing some of the most basic tags to make an extremely simple web page.

(After class, I will post the web page we create right here for future review)

UPDATED:
Everyone made something different, but here’s how my page looked, and here’s the code:

ENJOY THE LONG WEEKEND AND SEE YOU NEXT WEDNESDAY!

Monday, September 4, 2017

Happy Labor Day!

Wednesday, September 6, 2017

In the last class, we looked at HTML (Hypertext Markup Language) code, specifically the use of “tags”, and how (with a few exceptions), there must always be an “opening” and “closing” tag.

Example: <b>This text will be bold.</b>

HTML is great, but a bit limited. That’s where CSS (Cascading Style Sheets) comes in, which is what we’ll be looking at today. But first, let’s look at the “div” tag in HTML (<div>), which is shorthand for “division”. Div tags help us to create different sections of a page, and arrange them as we like. Go to JSFiddle to see a very simple example of a div.

We’ll use this div to try out some CSS. CSS is similar to HTML, but uses a slightly different syntax. HTML uses the “=” symbol to define something (as in: &ltimg src=”http://picture.com/pic.jpg”>), and simply lists additional properties and values with spaces (as in: &lta href=”http://mylink.com” alt=”my link”>), while CSS uses a colon instead of an “=” symbol, and a semicolon instead of a space (as in: color: blue; height: 100px).

Here are a few of the CSS properties we’ll play with today:

background: the background color. Ex: background: blue;
color: the text color. Ex: color: #aa0000;
width: the width of the element. Ex: width: 200px;
height: the height of the element. Ex: height: 200px;
position: how the element interacts with other elements. Ex: position: fixed;
padding: how much space is between the edges of the element and the content inside of it. Ex: padding: 0px 10px 0px 10px;
margin: how much space is between the edges of the element and the content outside of it. Ex: margin: 0px 10px 0px 10px;
border: a border around the element. Ex: border: 3px red dashed;
opacity: the opacity of the element. Ex: opacity: 0.5;

To play with these, we simply add a “style” property in HTML to our div tag. Ex: <div style=”width: 200px; background: black; color; white;”>

Monday, September 11, 2017

CLASS CANCELLED

Wednesday, September 13, 2017

CLASS CANCELLED

Monday, September 18, 2017

Last time, we looked at CSS, and how we can use “div”s to add advanced styling to an element. Today we’ll go further by seeing how divs can be associated with a “class” or “id” in a “Cascading StyleSheet”. And that classes and ids can be assigned “properties” and “values”, as in this example:

CODE
<html>
<body>
<head>
<title>This is my website lol1!1!!</title>
<style>

.box {
width: 20px;
height: 20px;
display: inline-block;
background: #000;
margin: 5px;
}

#redbox {
background: red;
}

#fake {
background: url(‘picture.jpg’);
background-size: 40px 40px;
}

</style>
</head>
<body>

<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>
<div class=”box” id=”redbox”></div>
<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>

</body>
</html>

APPEARANCE

And we can play with the code here.

We’ll also be talking more about “psuedoclasses” and “transitions”, and begin looking at how to incorporate images, both as backgrounds and images. The images we’ll use for our primary exercise can be found here:

  1. http://sunysullivan.edu/wp-content/uploads/2016/09/house.png
  2. http://sunysullivan.edu/wp-content/uploads/2016/09/dog.png
  3. http://sunysullivan.edu/wp-content/uploads/2016/09/dude.png

Wednesday, September 20, 2016

Today, we’ll go farther with creating animated images with CSS by making CSS shapes! Once more we’ll be working in JSFiddle.

css-tricks.com

Several of the more advanced shapes require use of the :before and :after “pseudo-class”, so we’ll discuss those.

We’ll also learn about / focus on the following CSS properties: z-index, position, left, right, top & bottom, and transform: rotate(xdeg).

We’ll also discuss CSS Animations: developer.mozilla.org

And REVIEW FOR NEXT MONDAY’S TEST!

You will need to know:

Monday, September 25, 2017

As promised on Wednesday, we’ll start with a TEST!!!

Last class, we learned a bit about animation by simply using the “transition” property. Transitions are great, but a bit limited. They typically have to be triggered by a hover, or some other sort of pseudoclass. So, to go further, we create “keyframes” and then use the “animation” property of CSS. Rather than talk about it, let’s dig in and play with it: Take a look at an incredibly impressive animation I made, and work in pairs to tweak, alter, or add to it and see who can create the best result by the end of class!

Wednesday, September 27, 2017

First, students who have not yet taken the test will do so.

Then, a quick and simple pop quiz, which will take place at JSFiddle.

We’ll spend most of the day with a project–turning static art into a web page, using this infographic.

Monday, October 2, 2017

Today, we’ll start with a simple pop quiz, at JSFiddle.

We’ll talk about web fonts, looking particularly at Google Fonts

Then, we’ll spend most of the day continuing last week’s project–turning static art into a web page, using this infographic.

Wednesday, October 4, 2017

Start with the same pop quiz as Monday, so it should be easy! JSFiddle.

Then we’ll look at taking animation a bit further, like in this example.

Then, we’ll spend most of the day continuing last week’s project–turning static art into a web page, using this infographic.

Monday, October 9, 2017

Third time’s the charm: we’ll start with the same quiz we’ve done the last two classes, and this one will be recorded as a test grade, so no talking or helping each other! Here we go!

Next, we’ll be discussing backgrounds (which we started on Wednesday), from simple colors using Color Names, Hexadecimal Codes, or RGB, to images, patterns, and gradients. We’ll use this information in making the diagonal line background in this infographic.

We’ll also talk about SPRITE SHEETS!

Wednesday, October 11, 2017

Alright, honestly, last chance: we’ll start with the same quiz we’ve done the last THREE classes. If you bombed on Monday, you can use the grade you make today instead. Here we go!

Next, we’ll be reviewing everyone’s sprite sheets as a group, then animating them using this JSFiddle as a reference.

If time remains, we’ll work on completing this infographic.

Monday, October 16, 2017

Today, we’ll start by talking about SVGs. We’ll just have an overview of what they are, and how and why they are used. Nothing too heavy.

SVGs (Scalable Vector Graphics)
What can be drawn with SVGs?

SVG Tutorial

Google Logo code via Gizmodo [src]
Tweak it at JSFiddle

SVG Reference Guide

Next, we’ll continue playing with animations and CSS shapes by looking at two of the most common uses of CSS animated shapes on the web: play/pause buttons, and menu/close buttons.

Wednesday, October 18, 2017

We’ll continue working on our hamburger menu to “X” animations today. To begin with, we’ll get a VERY basic introduction to Javascript: what it is, and why we use it. We’ll need it to be able to complete our animation by having the ability to click it to go to one state, and click it again to go to another.

Example.

In actual effect, it becomes a bit more complicated, but with the exact same concept.

Monday, October 23, 2017

Today we’ll finish up our menu/X CSS buttons, and talk about animated GIFs!

The Basics for Creating GIFs in Photoshop

Wednesday, October 25, 2017

Today we’ll continue working on our animated GIFs, then go a bit deeper with CSS Animations:

Monday, October 30, 2017

No class, Patrick out sick

Wednesday, November 1, 2017

Today, we’ll look at using what we’ve learned with CSS to make graphic, dynamic elements as part of an infographic

We’ll also talk about how we design for different screen sizes.

Monday, November 6, 2017

9 classes left!

Wednesday, November 8, 2017

8 classes left!

FINAL PROJECT REQUIREMENTS

  1. Contains at least 10 elements (6%)
  2. Contains at least 1 animated .gif (6%)
  3. Contains at least 1 svg (6%)
  4. Contains at least 20 different CSS properties (6%)
  5. Contains at least 4 keyframes (6%)
  6. Contains at least 1 keyframe with multiple points (eg. 0%{} 50%{} 100%{} versus from{} to{}) (6%)
  7. Contains at least 3 media queries (eg 3 different layouts at different sizes) (10%)
  8. Contains at least 2 embedded images (6%)
  9. Contains at least 3 :hover pseudo-classes (6%)
  10. Contains at least 2 elements that share a class, but have different appearances or behaviors as defined by their ID (6%)
  11. Contains at least 1 sprite sheet (6%)
  12. Is well-designed and attractive (30%)

Monday, November 13, 2017

7 classes left!

Review images, begin converting images into CSS.

Wednesday, November 15, 2017

6 classes left!

TAKE 2: Review images, begin converting images into CSS.

Monday, November 20, 2017

5 classes left!

Work on final project!

Monday, November 27, 2017

4 classes left!

Work on final project!

Wednesday, November 29, 2017

3 classes left!

Work on final project!

Grading requirements / media query example