Thursday, November 21st

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

CCV Classes tomorrow – Lunch form – last chance

Thanksgiving Break – Saturday, Nov. 22- Sunday, Dec. 1st

Are you on top of your work? Take advantage of all your time. Do you really want to have work to do over break?

Download Unity – I’d like to get in to some game programming after the break. Download Unity

Website Address – paste the link to your website on geocities.

Isaac – leave at 2:35 today
Mia – leave at 2:40 today

10:10 Photo Gallery – Images – Handling image sizes

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

Isaac – 2:35 Dismissal Today

Activity: Create a Photo Gallery using Flexbox. 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.

Before you get started with our this activity, let’s look another Super Power of Adobe Bridge – WORKFLOW

With Adobe Bridge, batch resizing and naming is really fast and efficient. Let’s look at how to set up a workflow and then batch process some photos to prepare them for the web and your project above.

Bonus – We’ll also look at the figure and figcaption elements!

10:50 Break

11:00 Custom Fonts and Font Awesome

When looking for fonts – Try fonts.google.com, font squirrel, adobe fonts and DaFont.

Font Squirrel, Adobe Fonts and DaFont will require you to download and call the font in your CSS. The process is easy. So let’s do one together. Adobe has a clever generator that converts the font like google fonts. Font Squirrel has a generator too.

The fonts we want to download are TTF fonts. TTF stands for True Type and they are best for desktops and mobile screens. OTF or Open Type fonts are good for print.

@font-face{
    font-family: Elione;
    src: url(../fonts/Elione.ttf);
}

h1{
    font-family: Elione;
}

What’s Awesome – Font Awesome!

Font Awesome is an icon library which provides 1500+ free scalable vector icons. This library is completely free for both personal and commercial use. Originally designed for Bootstrap, these icons can be customized easily. (Bootstrap is a front end framework – well learn about that later)

To add the Font Awesome library to your website/project you need to link to it using a CDN in the head tag of your website.

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
    <i class="fas fa-thumbs-up fa-5x"></i>
  </body>
</html>

CDN stands for Content Delivery Network. Code libraries like Bootstrap, JQuery and Font Awesome (and many others) are accessed through a CDN. The benefit to linking to a library vs. installing one is SPEED!

Let’s go to Font Awesome and make some accounts. Then will make a Kit. A kit is like a backpack. It carries your favorites and caches them for supreme speed. Speed matters when it comes to graphics.

Let’s go to codepen – Call it FontAwesome and we’ll see how the font Awesome works.

Awesome Project:

Find a Quote that moves you.
Create a WebPage with your quote and add font Awesomeness to it. When you are done, FTP it to the server. You can also create your own quote – if you happen to be so clever. Use a custom Font!

This project will help you:

build a proper head tag with meta data!
link a stylesheet
link to and use font-awesome using a CDN
practice your html and css
add custom fonts – do add a custom font for your quote!
use the validator
file transfer via FTP
code practice
style anyway you like, just be sure to be ready for by the deadline of 12:15pm today!

Start with a folder on your desktop. Call it FontAwesome. Inside, organize the necessary items. This project is due today at 12:15 for viewing.

One more thing…..

The <blockquote> tag specifies a section that is quoted from another source. You can also add the <cite> tag after the block quote or inside the blockquote to identify the source.

Here is a nice reference from W3Schools

ProTip… use <q> for inline short quotations – like when you want to wrap something in “air” quotes

Take notice: The blockquote element has some baked in styles for margin and padding