CNH KIWIN'S 2016-2017 Official Technology Manual

CNH KIWIN’S

TECHNOLOGY MANUAL 2016-2017

R

Table of Contents

04 Technology Committee Introduction 08 Roles and Duties 10 Graphic Design 22 Web Development 34 Video Production

46 Newsletters 52 Key Club Graphic Standards 62 Technology Awards 72 Social Media 80 Closing

DIA NGELO DIANGELO SOR IANO SORIA NO

DISTRICT TECHNOLOGY CHAIR

N E W T ERM, WH O DIS ?

What's up CNH KIWIN'S, I'm DiAngelo Soriano, your District Technology Chair for the 2016-2017 term. I'm a senior at Hercules High School (C/O 17 for life fam). I've been a member since sophomore year, and I'm hoping to finish my KIWIN'S journey strong and full of lasting memories.

I've been making videos since I was in 6th grade, and I've been about that tech. life for just as long. I hope I can bring my passion for technology into the media that the Technology Committee and I create for the District. Being able to work with people from far and wide is an experience I'll never forget, and I know that this year will be full of fun, service, and Graphic Standards (Check out my Youtube: youtube.com/diangelosoriano).

Yours in Service, DiAngelo Soriano 2016-2017 CNH KIWIN’S District Technology Chair

NH N H UNG TRA N TR AN

DISTRICT BULLETIN EDITOR

HE L LO !

My name is Nhung Tran and I am your District Bulletin Editor for the 2016-2017 term! If you have any trouble pronouncing my name, it’s “Nyoom” like a car speeding down a street.

I began designing when I was around 6th grade. I realized how complicated the field was and I fell in love with it. I studied psychology and media, and invested thousands of hours to produce the designs I make today as a high school junior. I hold such a huge respect for technology and I love every part of it.

Previously, I served as my club's Bulletin Editor and in the District Technology Committee as the Head of Graphics (That’s how I grew my love for Key Club Graphics Standards). I have met a diverse group of people throughout my years in KIWIN'S. It’s such an indescribable and heartwarming feeling when we are able to work together despite our differences and distance, and that’s when I knew I wanted to invest in this organization.

I can’t wait to show what our District is capable of through technology! Hit me up if you would like me to design something for you!

Yours in Service, Nhung Tran 2016-2017 CNH KIWIN’S District Bulletin Editor

AARON ZEPEDA DESIGN/VIDEOGRAPHY Hello everyone! My name is Aaron Zepeda, and I currently serve the Goldstone Division as their Chairperson of Technology, and my club's Tech Chair. I'm also a senior at Glen A. Wilson, and have been a member of KIWIN'S since my sophomore year. I discovered my love of graphic design when I made my first t-shirt design in middle school, and have been developing my passion for it ever since. I work with others in hopes that they learn about the wonders of creation and design, along with its impact in the world. Being in the Tech Committee has given me a place to practice and refine the skill, all with a special purpose in mind: for the service of others. I can't wait to see what the year unfolds, and I'm excited to share my excitement with all of you!

BREANNA FONG VIDEOGRAPHY/PHOTOGRAPHY Hello, I am Breanna Fong and I am from Jade Division. Since I have been the Historian for Hercules HS KIWIN'S, I only knew how to take good quality photos as well as photo-editing.

I only had experience in photography with no experience in graphic designing. Since I joined, the Technology Committee has changed my perspective in the technology field.

It has brought me closer to amazing and talented people who have helped me improve in graphic designs and video productions. I had never thought this committee can help me learn to love taking videos, and I can't wait to learn more from it. Overall, this has been the highlight of my third year of being a part of KIWIN'S, and I love every laugh, every skype call, every minute I spend with the Technology Committee.

PATRICIA DINH DESIGN/PHOTOGRAPHY Hi everyone! I’m Patricia Dinh and I’m a member from Jet Division. I’ve loved technology since I was young, and am honored to be able to contribute the skills that I have while actively involving myself in our community as a member of KIWIN’S. I have steadily developed a passion for photography and photo-editing since middle school, and I am definitely excited to learn about graphic design, video production, web design, and so many other useful skills by being a part of this wonderful committee this upcoming term.

Getting to work with everyone in this Technology Committee has undoubtedly been one of the best experiences I’ve ever had and will be an unforgettable memory as I develop more skills and continue on into the best year of KIWIN’S yet.

VICTOR HUYNH DESIGN/PHOTOGRAPHY Hello hello! I'm Victor Huynh and I'm one of the historians at La Quinta KIWIN'S from Jet Division. I've been interested in technology ever since I knew what it was. I would always go around the internet to see what new phones and other devices were like. Although my interest in photography and graphic design are probably the most prominent, I also enjoy food, YouTube, and culture! I really like speaking and learning other languages and watching fat cat videos in my free time. Weirdly enough, I've also recently developed an addiction to Yakult and I don't think it's very healthy. I'm also usually sleep-deprived, which is also bad. Oops! Besides my funkiness, I plan to use Tech. Committee as a way to express myself and contribute to a greater good that is the work of CNH KIWIN'S!

THE RO L E OF

EDIT OR S

C RE A T E GR A P HI CS, F LY E R S,

A N D I L L U S T R A T ION S RE D E S I G N A N D UP D A T E

T HE CLU B W E B S ITE

C O M P I L E VI D E OS T H R O UGH

TH E MA N I PULA T I ON OF

V A R I OUS ME DIAS H A VE K N OWLE D GE OF E X T E RNAL

D EVIC ES AND S OF TWA R E P RO M O T E T HE C L U B ,

D I V I S I O N , A N D DI ST R I CT

G R A PHIC D E SIGN

Software

Ai Adobe Illustrator is highly recommended for high resolution vector-based graphics. In Adobe Illustrator, it is important to get comfortable in working with shapes and lines to build graphics. The option to freehand draw is available. Most designers prefer Illustrator for their work.

Ps Abobe Photoshop is an alternative to Adobe Illustrator, though it is more geared towards photo editing and illustration. Photoshops allows graphic pen stability for illustrating and basic photo editing options unlike Illustrator.

Most artists prefer Photoshop for their work.

Hardware

A graphics tablet is useful in providing the designer the efficiency of a pen and paper rather than a mouse or trackpad. It can definitely shave down the time required to make certain graphics. Graphics Tablets come in many brands and sizes, Wacom Tablets being one of the reputable.

Fonts and Spacing

K

San serif fonts are modern and beautiful. Use San Serif fonts for Titles, Subtitles, and Body paragraphs. Key Club International recommends the usage of Myriad Pro, Century Gothic, or Verdana.

K

Serif fonts have a classic appearance.

Serif fonts should be used on body paragraphcs only. Key Club International recommends the usage of Garamond Premier Pro or Goudy Oldstyle.

Giving Words Space

Ohana Ohana too close to bottom edge

Ohana acceptable

too close to top edge

Ohana acceptable

Ohana too close to left edge

Ohana acceptable

Typography

Direction has a

purpose Direction guides the reader’s eyes and creates interaction. This can be exemplified as reading from left to right, up and down, or applying different font sizes. Psychologically, people notice big fonts first before reading the smaller so use direction strategically.

Contrast is TRADITION Contrast is displayed through using different colors, sizes, and fonts. Light backgrounds pair with dark fonts and in special cases, light fonts. Dark backgrounds pair with light fonts. It is not recommended to use the pure saturation of a color as it strains the eyes. Stick with a shade, tint, or tone of any color.

th y h R creates

m

LIFE

Rhythm creates viewer interaction through text layout. Arranged words immediately evoke a mood, which is important when introducing a visual project or item. It is important to find a balance in using rhythm, as too much can stress the eyes and too little can be easily dismissed by viewers.

Basic Rules of Graphic Design

The job of a graphic designer is to effectively communicate with the audience using visual content. The audience should always be kept in mind when designing. Ask yourself, “Would they be able to read this?”, “Does this call others to action?”, and “Does it look aesthetically appealing?” Do not use crazy fonts and numerous colors, especially when society is favoring minimalism.

Psychology plays a part in graphic design. Color is a major component as it affects the mind subconsciously. Each color casts a mood and are assigned purposes. For example, the color blue relaxes the mind and is mainly used to promote technology.

Less is more It’s tempting to fill every space of your design, but doing so can create distractions and take away the purpose of effective design.

Removing unecessary elements will make your designs more mature and will place less stress on the audience. Negative space is there for the audience’s eyes to rest.

Y

E

A

H

Good contrast is extremely important in design. Avoid using light font on light backgrounds, dark fonts on dark backgrounds, or similar colors. Don’t make the audience squint to read about your event.

BIG GRAPHIC

MEDIUM TITLE SMALL EXTRA INFO

A hierarchy makes it easier for the audience to go through the information. Always have a big, medium, and small element. There is no need to have every element big just to fill up space.

Just be good.

Many fuss over trying to be original in the design world because it seems like almost everything has been done. Rather than being orginal all the time, it is more important to be good. Reflect back to the basics and go at your own pace and artistic style. This produces more quality work rather than stressing over originality, which is simply a bonus.

Flat Design

Flat design is a minimalistic design approach that emphasizes usab two-dimensional/flat illustrations composed of layered, manipulated sha

bility.It features clean, open space, crisp edges, bright colors, and apes. Long shadows usually accompany flat design to provide depth.

Flat Design Examples

WE B D ESIGN

Software

Dw The most commonly used software is Adobe Dreamweaver. Without much coding needed, you can use Adobe Dreamweaver to easily design your website and upload onto a host.

< >

For a more adventurous and advanced method of web design, you may use a notepad such as Notepad++ to write your code. There are plenty of applications available based on your experience level which allows everyone to learn web design.

Hardware

</>

</> </>

</>

Web Development has been made easy with recent technological advancements. With an Internet connection, you can easily code with applications found on the Google Chrome Web App Store. Coding can be done on tablets and mobile phones. However, for the true coding experience, use a desktop application.

Coding Languages

HTML H yperText M ark u p L an g u ag e HTML is the standard markup language used to create websites. Browsers translate contents of an HTML file into webpages.

CSS Ca sc a d i n g Sty l e Sh e e ts CSS defines the appearance of contents in a web page by applying rules within a markup language file. It controls the color, font, and organization of a webpage.

J a vasc ri pt Javascript is a programming language that dictates user interaction by embedding scripts in markup language files. It is created for animation.

jQ u ery jQuery is an online Javascript library containing scripts. It is designed to simplify Javascript coding.

Basic Structure HTML documents contain HTML tags which describes different document content (e.g. the <p> tag stands for paragraph). Here is a simple HTML document along with the breakdown of common terms used in coding. < ! D O C T YPE h t m l> < ht ml > < he a d > < t i t l e > T e r m s </ tit le > < / he a d > < body > < h1 > T h e B as ic s < / h 1 > < p> T h e r e ar e c o d in g t erms. < /p> < / bod y > < / ht m l>

Tag Start Tag

End Tag

< bo d y >

< /b o d y >

le f t- a ng le bra c k e t

charact er(s )

r i g h t - an g l e br ack e t

left-angle bracket

charact er(s )

rig h t -a n gl e br a c k e t

Element

< title> Terms </title> start tag

co n t e n t

end tag

Sample Code

(Spaced out for visual purposes.)

<!DOCTYPE html> <html> <head> <title> KIWIN ’S </title> </head> <body>

<h1>One Family. One Mission. One Word: KIWIN’S </h1

<p> KIWIN’S, the 32nd District of Key Club Internationa </body> </html>

Translation

DEFINES DOCUMENT AS HTML BEGINS HTML DOCUMENT PROVIDES INFO ABOUT THE DOC PROVIDES A TITLE FOR THE DOC (VISIBLE ON TAB) ENDS <head> TAG VISIBLE CONTENT

1>

HEADER TEXT

al...</p>

PARAGRAPH TEXT END OF VIS IBLE CONTENT END OF HTML DOCUMENT

Fo r mo r e c o d i ng t i ps, vi si t cod eacad em y . co m

Code Embedding

SHARE

EMBED

Embed Buttons Most sites such as Issuu and Youtube contain embed buttons which allow you to copy a snippet of code which you can implement onto your website. Embedding allows the viewer to experience the content without having to leave the tab.

Website Requirements

ABOUT US HISTORY OF KIWINâ&#x20AC;&#x2122;S (32ND DISTRICT

OF KEY CLUB INTERNATIONAL)

DISTRICT PROJECTS/EMPHASES CLUB BOARD PROFILES OTHER WEBSITES (DISTRICT AND INTERNATIONAL)

UPCOMING/PAST EVENTS BRIEF DESCRIPTIONS EVENT PHOTOS OR VIDEOS

CONTACT US CLUB BOARD CONTACT INFO

Templates

Weebly

Wix

Weebly allows you to build a website using drag-and-drop features.

There is a library of website templates in which you can start the layout of your website. Weebly has fairly cheap subscription plans which all remove the watermark from your website. The common Pro plan enables all drag-and-drop features.

Wix allows you to create a website with their drag-and-drop tools and apps from the Wix App Store. One drawback is that editing the website through coding is not encouraged, however, embed codes works. Wix has affordable subscription plans that remove ads and allow you to connect to a domain.

drop here

VIDEO

PR OD

O

DUCTION

Software

Ae This software can be used to edit and create videos of all shapes and sizes. After Effects may not be the most ideal for creating very long projects, but is perfect for motion graphics and short projects with effects not available in other softwares. Photoshop and Illustrator projects can be easily imported into your project to create stunning visual graphic videos.

Pr This software is more geared toward basic productions with little to no special effects, and can be used to effectively handle large projects with many sources. Premiere Pro is ideal for editors who are not as experienced with video production, but want something more than iMovie or Windows Movie Maker. Adobe Premiere Pro can be paired with After Effects to blend special effects with large project workflow. Other softwares such as Adobe Audition or Adobe Media Encoder can also be used in tandem with Premiere for maximum efficiency.

Hardware

For first time or more casual video producers, Windows Movie Maker, Final Cut Pro, and iMovie are perfect for starting off in the world of video production. Easy to use tools and workflow as well as low cost make these programs great for beginners or those on a budget.

A tripod, monopod, or other means of stabilization such as a flat surface or a roll of duct tape eliminate shaky footage and boost production value.

Most filmmakers will agree that good sound is one of the most important parts of any video. Getting external microphones close to the talent and out of harsh winds or noise will dramatically increase the quality of the video.

Video Production

NOT EVERYONE WILL HAVE ACCESS TO A PROFESSIONAL CAMERA BUT HERE ARE SOME UNIVERSAL RULES VIDEOGRAPHERS ABIDE BY. GOOD LIGHTING IS EVERYTHING AND FILMING IN DARK OR SHADED AREAS WITHOUT PROPER PREPARATION CAN RUIN FOOTAGE. PLAY WITH YOUR SETTINGS OR USE EXTERNAL LIGHTING. AVOID SHAKY FOOTAGE! USE A TRIPOD OR FLAT SURFACE TO PLACE YOUR CAMERA ON, OR BREATHE SLOWLY WHEN HOLDING YOUR CAMERA. GOOD VIDEO WILL HAVE GOOD AUDIO. EXTERNAL MICROPHONES OR RECORDERS WILL HELP. QUIET ENVIRONMENTS ARE YOUR FRIENDS IF YOU DONâ&#x20AC;&#x2122;T HAVE ACCESS TO AUDIO EQUIPMENT.

Compositions Good video should contain different angles and shots. Here are different ways to film angles for more attractive footage.

Certain compositions are more effective for different situations like interviews or scenary shots. Notice how your attention moves when you frame things a certain way. Video is all about engaging the eyes.

Object of focus

Other objects

Shift in audienceâ&#x20AC;&#x2122;s focus

DEPTH

LEADING

LINES

FRAMING

NEGATIVE

SPACE

RULE OF

THIRDS

Publishing Videos

Great, youâ&#x20AC;&#x2122;re finally done with that new video! But now what? Itâ&#x20AC;&#x2122;s time to make that video public via Youtube, Facebook, Instagram, or even Myspace.

By publishing to one of these sites, the author of the post is agreeing to the terms and conditions of each site. Generally, social media sites will have similar rules and regulations, but no matter the site, they are bound to U.S. Copyright laws.

Any music, video, or content used for videos, particularly on Youtube, must be property of the poster, unles the video is for educational purposes or satire. That means using copyrighted music in that club video is against the law if it is posted to Youtube.

There are, however, sites or Youtube channels that provide royalty free or non-copyrighted music to use in your productions. Sorry, that new Taylor Swift song on your new club promotional video will most likely be taken down if posted on Youtube for copyright infringement.

Video created for the Club Video Contest at DCON also cannot contain copyrighted material. Generally, slideshows, private videos, or other small scale media not on Youtube will not be scrutinized for copyright claims. More information on copyright laws in the United States can be found here: www.copyright.gov/title17/

Advanced Production Accessories

V a r iab le N D Fl i ter An ND filter is basically like sunglasses for your camera. With an ND filter (NDF), you can open up your aperature and keep your shutter speed low while in video mode. A variable NDF will allow you to quickly adjust the exposure of the camera while recording (Learn how to shoot on manual video settings!). This could also be helpful in filming in an area where youâ&#x20AC;&#x2122;re experiencing constant change in external light, like an event thatâ&#x20AC;&#x2122;s both in and out of shade.

Li gh t B ounc er or Di ffuser Light bouncers and diffusers give you control over sunlight or external light. On a bright, sunny day, subjects will have unsightly shadows across their faces, but adding a reflector to the opposite side can reflect some of the lgiht back, filling in those harsh shadows. An inexpensive 5-in-1 light from Amazon is a great way to start experimenting with natural light.

LC D Viewfinder Loupe Have you ever struggled to see if something was in focus? Unable to see your LCD screen because of the sun? Get yourself a scren loupe/viewfinder. These are like little enclosures for your LCD, and with them, you’ll be able to nail focus pulling, preview your shots, and see more of the details of your LCD while you’re out in the sun, or when there are other lights producing glare on the screen.

Vide o St abiliz e rs These stabilizers will take some of the shake out of your handheld footage. For the filmmaker on the move, these are highly recommended. Don’t let the price discourage you because there are plenty of DIY/PVC stabilizer tutorials on Youtube! Smooth footage is crucial for good films.

NEW S NEWS

NEWSL

ETTERS

Tips

LEFT-ALIGN, JUSTIFY PARAGRAPHS, AND AVOID HYPHENATING WORDS KIWIN'S, the 32nd district of Key Club International, is a student-led organization that enthusiastically promotes the development of character and leadership through community service within the Kiwanis family.

KIWIN'S, the 32nd district of Key Club International, is a student-led organization that enthusiastically promotes the development of character and leadership through community service within the Kiwanis family.

KIWIN'S, the 32nd District of Key Club International, is a student-led organization that enthusiastically promotes the development of character and leadership through community service within the Kiwanis family.

It is more pleasing to the eye to have everything in a smooth chunk. Formatting your text with justification will make your text seem even and ordered instead of chaotic. Avoid centering paragraphs of text so that the eyes do not have to continuously move to the center. Left-align with justification allows for quick and easy reading.

HAVE A BALANCE BETWEEN VISUAL

ELEMENTS AND BODIES OF TEXT

If something can be explained in a few sentences, do so. Donâ&#x20AC;&#x2122;t try to overcomplicate anything. Then use the extra space around the text to place a visual element to retain interest with the information. With huge bodies of text, text can be built around a visual element, or make a header or footer for an easy way to get a visual element on there. It is important to gain the interest of the audience and retain it.

Configuration

COVER PAGE TO ATTRACT READERS

TABLE OF CONTENTS KEEP IT SIMPLE

EVENTS

BRIEF OVERVIEW

CLUB STATUS

INCLUDE HOURS AND FUNDS

RECOGNITION

SHOW THEM THEYâ&#x20AC;&#x2122;RE APPRECIATED

EXTRAS

BOARD, SOCIAL MEDIA, PROMOTIONS

IMPLEM

GRAPHICS S

ENTING

STANDARDS

Colors

Fonts

Sans Serif Myriad Pro

Century

Gothic

Serif

Garamond

Premier Pro

Verdana

Logos Give our seal some space. It has its own personal bubble too.

Use the outer ring to judge how much space the logo needs.

Always pair our CNH KIWINâ&#x20AC;&#x2122;S Logo with the Key Club International logo.

R

New Graphics

Pencils

Visit keyclub.org/fad/cm/brand.aspx for more

graphics standards resources

Application

Hello.

Application

GET A

THIS NOTES

Application

H E Y! WHATâ&#x20AC;&#x2122;S UP?

TECHNOLOG

GY AWARDS

Club Poster

Attracts and retains new members

Use Graphic Standards

Be Original

Visually Appealing

Promote Key Club International

Dimensions 18 x 24in

Include Key Club International Seal

No theme necessary

No bearing names of schools, communities, or districts

Club Shirt Be original

Promote KIWINâ&#x20AC;&#x2122;S

Be creative

Be unique

Visually Appealing

No professional help

Encouraged to follow theme

Club Video Be original

Promote Key Club International

High quality footage

No copyrighted music

No professional help

$ Cannot spend more than $200 for production

Club Website Be innovative, interactive, creative

KIWINâ&#x20AC;&#x2122;S oriented/ KIWINâ&#x20AC;&#x2122;S related content

User friendly/ Easy accessible

Abc Links to district website

Proper gram Spelling

Original Material

Loading time reasonable

Functions well with/ without images

c

mmar/ g

Accurate, current, updated content Web blogs are not qualified

f

S OCI AL

M ED I A

F a c e boo k

Establish Facebook groups

and organized whenev PROFILE PICTURES,

OTHER PICTURES,

AND GRAPHICS

MUST BE PROFESSIONAL

Create e

Can be used to store service events photos for future reference and archiving

Create a club as a

s to keep members notified

ver releasing information

event pages for service events or fundraisers.

a physical Facebook account that represents the a whole.

I n s t a g ram

FEATURE A MEMBERâ&#x20AC;&#x2122;S EXPERIENCE

PROMOTE EVENTS AND FUNDRAISERS

HOST GIVEAWAYS OR CONTESTS

S n a p ch at

SHOW MEMBERS HOW FUN SERVICE EVENTS CAN BE

QUICK AND INFORMAL REMINDERS

CREATE A SNAPCHAT PROMOTE AN EVENT

FILTER

TO

THANKS FOR

READING! DISTRICT TECHNOLOGY COMMITTEE Mrs. Ross

Breanna Fong

Technology Committee Advisor

Photography & Videography

kiwins.diamondra@gmail.com

bfpanda48@gmail.com

DiAngelo Soriano

Patricia Dinh

District Technology Chair

Photography & Graphic Design

kiwins.techchair@gmail.com

phdinh101@student.hbuhsd.edu

Nhung Tran

Victor Huynh

District Bulletin Editor

Photography & Graphic Design

kiwins.dbuled@gmail.com

victorthanghuynh@gmail.com

Aaron Zepeda Videography & Graphic Design aaron.zepeda33@gmail.com R