Bootstrap CSS!

What is a bootstrap? A bootstrap is a line of code that makes the framework for websites easier for developers. They are also used as templates for typography, buttons, tables, navigations, models, and several other functions. This makes web development ten times easier than starting from scratch. Having a template gives the coder a head start in developing the website.

Bootstraps prevent repetition between projects, add consistency to design and code between projects and between developers, quickly and easily prototype new designs and ensures cross-browser compatibility. Browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Edge, Safari, and Opera are all compatible with the bootstrap. This makes it the website available to more people.

Another advantage of bootstraps is that they are responsive. This means that they adjust to whatever device is being viewed on like smartphones, tablets, laptops, and desktops. This is vital to every website because without a responsive website the UX and UI between the product and the user would be a disaster. It would look unorganized as if someone copy and pasted oversized graphic elements.

The image above shows an example of how a responsive website looks like. We have the Desktop, tablet, and mobile versions on the website adjusted by their dimension and resolution of the screen. As you can see the header is sized down according to the viewing device. It is also noticeable especially in the mobile version that the layout changed from profiles lined up horizontally versus in mobile where the profiles (circles) are lined up vertically.

One way to get bootstraps to create a website is through the website getbootstrap.com. This website allows any web developer to get a bootstrap to include in their work.  These shortcuts also have pre-styled components like dropdowns, button groups, navigation bar, breadcrumbs, labels, badges, alerts, progress bar, and several others.

Essentially, bootstraps are shortcuts of code in HTML and CSS; instead of typing fifteen lines of code, it could be shortened to three with the power of the bootstrap!

Why is Bootstrap so popular?

I believe bootstrap is popular because of the possibilities it is capable of. The templates Bootstrap provides can be altered to be one of a kind. Making a website could take only a matter of minutes, while at the same time visually look modern unlike former ways of building websites. Web Responsiveness is also another factor that makes web developing a lot easier which is why it is so popular.

Photo by David Rangel on Unsplash

Web Safe Colors

Web safe colors are colors that are supported by a majority of web browsers and virtually any operating system back when computers could only handle 256 colors. However only 216 colors out of the 256 were constant enough to be considered to as “web safe”.

  Nowadays, we don’t have to worry about using web safe colors because of how technology has greatly advanced. Monitors now support millions of colors. There may be a slight difference in color depending on what operating system and software is being used to display all the wonderful vibrant colors.

  CSS and HTML formats specifically allow for over sixteen million colors to be displayed without any distortion of lightness, saturation, or hue of the color. To break it down further the colors support 256 shades of red, 256 shades of green, 256 shades of blue, when combines make exactly 16,777,216.

  Most designers of web determine colors by hex codes. Hexadecimal notation is a six digit/alphabetical code that when is typed in Adobe software produces a specific color. For example, the hexadecimal notation for magenta is #ff0ff. Or if you want a darker shade of magenta just type in the code #8b008b. Another helpful guide to finding the perfect color is RGB notation. This method functions by adding and/or removing the colors red, green, and blue. Adding all the colors (each 255 shades of RGB) create white because they’re additive colors. An example of RGB notation is if you want to create a pastel lavender. Simply type in the notation R: 216 G:205 B:255.

  To pick a website’s color is very challenging. Instead, search for color picker in Google and several pretty color combinations will show up and help you decide which color suits best for your website. Color schemes like monochromatic, analogous, and complimentary colors are typical ways for picking colors for any website.

Web safe colors don’t really apply nowadays but as always, can still be displayed in monitors. But now, the world is unlimited to any color pallet ever. Web safe colors can be applied in Photoshop simply by clicking the “Web Safe Color” check box.

Colors can change on what kind of brand you have. The red on a Windows monitor is different on a Macintosh monitor. *cough cough* (Macs suck)

To play around with RGB notation click here

To find the exact hexadecimal code for your website click here

To learn more about web safe colors, hex codes, RGB notation, and a whole lot of other stuff click here

Photo by Thomas Charters on Unsplash

72dpi vs. 300dpi

After a few guesses of attempting to guess what dpi stands for I’ve concluded that it is an abbreviation for Dog Pee Incidents. However, the intellectual internet has yet again taught me something new; Dpi stands for dots per inch.

What’s Dpi?

Dots per inch refers to the print on posters, banners, and several other printable objects that use dots of ink per inch to determine the quality of a printed image. In simpler terms, the higher the dpi the more detail would show in the finished printed product.

DPIs used for Printing and Web

The DPI may have to be altered depending on how the designer will exhibit his or her work. If the designer chooses to print their work, they must use a DPI of at least one hundred and fifty (typically three hundred.) It is important to have a  high dpi otherwise suffering of one’s self is guaranteed due to the poor quality If the designer chooses it to add their image on a blog it would be ideal to use a DPI of 72.  This is because it is considered the standard dpi for web images.

  Resolution also plays a great factor in images because if an image is taken in with a low resolution (like a flip phone or an old android tablet) then no matter what dpi the image is set to; it will come out in bad quality. In order to avoid that situation, designers should use only the most advanced camera for professionals, DSLR cameras. A DSLR’s resolution can go up to 50.6 megapixels for each photograph.

  Another important factor is the size of the computer’s monitor that any designer is  working on — which can alter the dpi of the image. For example, a monitor with the resolution of 1024×768 will have a dpi of 70. While in a monitor with a resolution of 1280×1024 would have a dpi of 87. This would result with a smaller image but with greater detail because of the density of pixels on the monitor or PPI (also known as Pixels per Inch.)

Later on in our multimedia class, we will have to know by prior knowledge when to use which types of DPIs which makes all of us just a little bit better.

To further comprehend the meaning and uses of DPI click here.

To explore more awesome pictures of this photographer seen in the featured image click here

 

Adobe Software Used in Multimedia

Multimedia is based on using software from adobe to create unique designs. There are six applications that are used to make the most minimalist to intricate ideas.

Acrobat

Acrobat is used to make, alter, and print files in a Portable Document Format. This is more commonly known as PDF. Important files that become a part of one’s portfolio are printed in this format.

Muse

Muse is and adobe application that is used to design websites. It is important to note that this does not include the code or functioning part of websites. Muse is only for looks. 😉   Web design are altered by where they are seen on like a desktop, tablet, and phone. Each mode have different limits of their screen ratio. However, Muse makes it easy to adjust and fit one’s website in any mode.

Photoshop

Photoshop is used to alter photos to make them prettier. This includes affects and several tools to make each of one’s photos unique and original. You can also make all of your subject’s blemishes disappear with the spot healing brush. Photoshop is also able to make cool optical illusions to trick one’s mind. Overall, Photoshop is a very versatile application that can be used in many ways and will be used frequently in Multimedia.

Animate

As of what I have heard, Animate seems to be one of the hardest applications to master or learn how to use it. Animate is used to create animations using vectors and such to make objects move. Sounds easy right? We’ll the challenge is to make it look decent enough to where it doesn’t look like a transition effect on PowerPoint. Animate’s features explain’s how it has a built-in camera to pan in and out. It also includes stock background pictures to use for one’s animations which saves time not looking for background photos. Along with being able to make your own custom vector brushes, you can save your work in 4K resolutions to make your animations super high quality!

Premiere Pro

Premiere Pro is an adobe application used for video editing.  Video editing will be used in multimedia for the yearbook project to show how great and amazing McFatter is. It may also be used for the Senior Exhibition. Premiere Pro deals with sounds and transitions for the video. For quality, it is depended on the camera used. In the case of being in multimedia, our DSLR camera would be the best bet to take high quality videos.

Photo by Ben Neale on Unsplash

Computer Safety Rules and Ergonomics

Computer Safety Rules

Guidelines are important for any person who use a desktop or laptop.  They ensure safety and security in order to stay away from people stealing your identity, getting a virus, and several other unwanted problems. It takes only five steps to protect your computer from any danger.

1.Create difficult passwords

Making strong passwords make it harder for someone to hack into your (for example) bank account and your money to buy a ferret. You can do this by using special characters like @!#*$%

2. Use safe connections

Using public internet connections are unsafe to use. Any device connected to free public connections become vulnerable to being hacked.

3. Always back up

Imagine working insanely hard on a project and all of a sudden your computer shuts down. Instead of crying in a corner for the rest of your unsuccessful life, learn from your mistake and back up all your important files.

4. Use firewalls

Firewalls protect files on your computer from being scanned by anyone.

5. Be careful with the internet

There may be a moment in time where you pass by a sketchy link saying that you just won a PS4. It would be best if you don’t click it in case you download a virus by accident.

Ergonomics

It is always a challenge finding the most comfortable position when sitting at your desk. However, thanks to the study of a person’s ability in conjunction with working, there is a proper way to work without ending up with scoliosis. Ergonomics provide instructions in how to not harm yourself while working.

One of the most major problems is back pain. This is caused by bad posture during the nine mundane hours of working at a desk office. The Alexander Technique is a posture stance that relieves any stress from the body and keeps the body from being injured.

To prevent back pain you must learn to sit correctly. This requires that you lay your back on the back rest to support your lower back, tailbone touching the back of the seat, legs over 90 degrees and 110 degrees, and feet on the floor. If you keep this habit, you will experience no pain of the spine unless you have a developed a spinal disability. If back pain continues to irritate you, please contact your local orthopedic doctor immediately.

Essentially, people work more efficiently, less stressed, and more productive if they use the power of ergonomics.

Photo by Benjamin Hung on Unsplash

Basic Computer Components

Without basic components, a computer will never be able to function. What does a computer need to operate? The essentials are a CPU, RAM, a hard drive, and a monitor.

CPUs

All my life I thought CPU meant Cat People Unite! Just kidding, CPU is the abbreviation for Central Processing Unit. As the name describes, the CPU receives information that translates it to actions in the computer. The clock speed is what determines the amount of commands it can process at the same time. This is measured in gigahertz (GHz.) The CPU looks like a small square that is placed in like a perfect puzzle piece on the motherboard.

RAM

RAM means Random Access Memory. Its purpose is to keep things at a short reach like clicking a separate tab instead of clicking the Google Chrome icon and searching for whatever you needed. It is basically a temporary memory that deletes when the computer turns off. RAM is measured in gigabytes and ranges from 4 to 16 GB.

Hard Drive

A hard drive is a data storage device that contains information permanently.  Information like software, downloads, pictures, documents, and several other things. Unlike RAM, the hard drive saves its information even when the computer is shut down. The hard drive has a data cable and a power cable that is connected to the motherboard. Inside this component looks much like a record player. It contains an aluminium platter, actuator arm, and a head (along with other technology.) The head, which is moves by the actuator arm caused by magnetic force, scans over the platter and reads magnetic signals in the form of zeros and ones.  The platter rotates up to 10,000 revolutions per minute! Storage is measured in gigabytes(GB) and terabytes(1,000 gigabytes.) Usually, computer contains from 500 GB to 3 TB (terabytes.) A standard size of a hard drive is 3.5 inches and for laptops it is smaller by an inch. 2.5 inches.

Monitor

The monitor is also known as the screen of the computer. This is could be connected by either HDMI, DVI or a VGA cable. This cable is connected to the motherboard to show what is going on the screen. There are various kinds of resolutions a monitor has: from the basic 800×600 to 4K resolution. Sizes also matter and can range from 17 inches to 24 inches or even bigger. Nowadays some monitors are touch screens meaning that they response to the  tap of your finger. The best part about monitors is that you can connect 2 or more to your computer and have a tab open for each monitor to achieve efficient multitasking!

Photo by Annie Spratt on Unsplash