Tuesday, November 18th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Career Showcase Event in the library from 11:30-2:00 – you may attend after 1pm today
- The focus is on Transportation & Logistics, Manufacturing & Engineering companies but there are plenty of other companies and organizations (many are listed below) that fit multiple career pathways including the military branches.
CCV Lunch Order – go get it

10:10 Handling Images for Web & Web Applications

Your bedroom can only hold so many things. Your backpack is more comfortable the lighter it is. Your stomach gets uncomfortable when it is full. Your backseat won’t hold your friends if it is filled with stuff. Space matters. Space really matters on your webserver. More space – more money you have to spend for your business or your client has to spend.

Let’s be intentional and talk about space, image formats and sizing.

For reference: A kilobyte (KB) is 1,024 bytes. A megabyte (MB) is 1,024 kilobytes. A gigabyte (GB) is 1,024 megabytes. Your server can hold 1GB.

Image Format Summary

JPG

photographs
Smooth transitions between colors
No Transparency Support

PNG

Images with flat colors or hard edges
Logos and illustrations without gradients
Images with transparency. 8 bit can provide one color transparency and 24 bit for variable transparency
File size correlates with the number of colors used: 2,4,8,16,32,64,128,256

Image Dimensions

Your image has to fit on your screen – check your monitor at DPI Love
Common display widths range from 1920 to 2560 pixels.
A good rule is to make everything fit into a 1024 pixel display screen. (The exception if you are using large or full page width background images)
Usually your images are much smaller in size
In almost all cases, larger image sizes result in larger image files

Image Optimization

All images should be optimized before we put them in our websites. In Photoshop we use the Save for Web process.
Did you Know that most digital phones save photos at much higher resolution than we need on the web
Pay attention to the pixel dimensions of the image, you can see this in Photoshop by going to image>image Size
Compress your Images further than Photoshop using Tiny PNG or Kraken

Let’s practice with a sample image – download this one and save to your desktop.

A nice updated blog article about best image sizes for your screens and layouts

Activity: Create a Photo Gallery using Flexbox. Remember you need to have a container for flexbox to work. Now, based on what we just learned, this should be pretty easy. All we need are some photos and we need to decide what direction we want our flex direction to be: row or column. I’ll help you get started.

You will need:

A Project Folder on your desktop- Name it PhotoGalleryFlexbox
An images folder with images 6-9 of them.
When selecting images, use ones from your LTA Photo Assignment or other photos from your photography.
Images – you will want to adjust the size of them (pro-tip). Try 680 x 420 for this assignment
A html document – name it flexphotogallery.html
Don’t forget to load up the <head> tag with all that awesome meta data (author, title,description)
A css style sheet linked to your html document
We’ll do a gallery walk before lunch of your photo gallery.
Sometime today – load to your website and link from your directory page
Bonus – We’ll also look at the figure and figcaption elements! if time allows

10:50 Morning Break (10 minutes)

11:00 Box Modeling Approach – Simple Bird

Today we will make a simple bird. We’ll focus on staying organized in the process. This bird will be used for a future project. I am going to suggest that you make a folder in your Google Drive – name it Modeling with Blender.

The approach we will be using will be called the box model approach. We’ll start with a cube and then use proportional editing to get what we are after. It’s a different way to approach modeling – using good geometry and lots of loop cuts.

11:55 Lunch

*Creative Commons Attribution 4.0* – Animal Style Burgers from In-n-Out

12:25 Our First Game – Unity

Let’s jump into the Unity project we started and build the start of your first game. There are many ways we can go – so we’ll start by sourcing ideas from you. But first – we need some game assets.