Thursday, November 30th

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

10:05 Today’s Notes & Attendance

Today is a CTE Blue Day

Today is also the last day of November!

CCV classes on Friday – doors will open at 9:15am. Use that time to get work done.

Mid Quarter Ends tomorrow – do you have work that is overdue? Still missing some About Me photos and About Me paragraphs. These are drafts. Get them in.

10:10 Image and Image Size – Why it Matters

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 look at an example together and then I have a visual on Codepen.
Be sure to use the right file format for the image and the right size for your intended use.

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

10:30 Figure and Figcaption Elements

A Platon photo – this is a caption and is made possible by using the figcaption element!

The figure element is intended to be used in conjunction with the figcaption element to mark up diagrams, illustrations, photos, and code examples (among other things).

For the most part, you have just added the <img> element for showing an image. However, there is another way that allows you to get a caption for your images AND give you more styling hooks AND is more semantically correct.

The <figure> element is followed by the <img> and then the <figcaption>. You can also add a figcaption after all figure elements are listed too.

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.

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 Awesome. 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