TECHNOLOGY MANUAL

2015-2016

T a b l e o f C o n t e n t s

04Technology Committee Introduction

06Roles and Duties

08Graphic Design

20Web Development

32Video Production

38Newsletters

02

42Creative Ways to Implement Key Club Graphic Standards

50Technology Related Awards

60Social Media

66Software and Hardware

74Closing

03

T e c h n o l o g y C o m m i t t e e I n t r o d u c t i o n

Hey KIWIN’S!

My name is Kevin Son, and I am proud to say that I am your District Technology Chair for the 2015-2016 term. I am currently 16 years old and almost beginning my senior year at La Quinta High School. I have been an Aztec since I was a freshman and a Manatee since I was a sophomore, with no regrets, of course. So far serving on KIWIN’S District Board alongside such an amazing group of individuals this year is such a blessing where I will be able to bring forth great changes and innovations that will make KIWIN’S more successful than it has ever been.To give you just a little more insight about me, outside of KIWIN’S, I am currently a member of La Quinta’s Color Guard and Winter Guard Team. When I am not involved in extracurricular activities, doing volunteer work, or studying, I absolutely enjoy spending time on the Internet and my computer

watching tutorial videos learning about graphic designing, video editing, and web developing programs. KIWIN’S has definitely been one of the greatest surprises that came to me in high school. Even though I joined this organization sophomore year, I never aspired to be a leader within my club, let alone this entire district. However, as my time in KIWIN’S continued, I got the chance to meet my true passion for technological arts such as graphic designing, video editing, and web development. I found the perfect way to combine what I love to do both: KIWIN’S and technology. Therefore, I was appointed the position of Technician Chair for my home club. Later on, I have built the confidence and skill to apply for District Technology Chair with the help of my true KIWIN’S role model, Jennifer Ngo. I know that this year will allow us accomplish many goals and I am so excited to work with all of you this term!

Hello.

I’m Kevin SonDistrict Technology Chair

04

H e a d o f G r a p h i c D e s i g n

H e a d o f V i d e o P r o d u c t i o n

H e a d o f W e b D e v e l o p m e n t

Hello! I am Nhung Tran and I am from Jet Division. I hold a position in La Quinta KIWIN’S as Bulletin Editor/Technician Chair. I became self-taught in Graphic Design and Illustration the moment I started middle school; I was attracted to the effective visual communication that defines graphic design and I can ramble about my passion for it all day. While transitioning to my second year of KIWIN’S, I joined the Tech. Committee to contribute my skills and to communicate with the District. This committee, no doubt, is the highlight of my journey.

Hello all! I’m DiAngelo Soriano, from Jade Division. I’m Jade’s Divisional Tech. Chair, and I’ve been working with technology my whole life. This year, I joined Tech. Committee to combine the things I love most: Video production and KIWIN’S. I create videos with Tech. Committee for the district to promote things like club development, Fall Rally, MNT, DCON, and many more. Overall, being part of this committee has brought me closer to technology and closer to people who can work with me to further develop my skills and friendships.

Hello everyone! My name is Alvin Lee from Jet Division. I am the Marina KIWIN’S Bulletin/Tech Editor and Special Projects Chair. At a very young age, I have developed a passion for technology and web design. The Technology Committee allows me to express our charities using con-temporary design and others through the kiwins.org web-stie. Overall, this committee changed my life and my love for serving my home, school, and community.

05

T e c h n o l o g y C h a i r : R o l e s a n d D u t i e s

create graphics, flyers, and illustration

redesign and update club website

</>

< >

06

compile videos through the manipulation of various medias

knowledge of external devices

assist historians in recording footages and images

07

G r a p h i c D e s i g n

G r a p h i c D e s i g n

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.

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.

KK

Ohana

OhanaOhana

Ohana

OhanaOhana

too close to bottom edge

too close to left edge

acceptable acceptable acceptable

too close to top edge

Giving Words Space

F o n t s a n d S p a c i n g

10

T y p o g r a p h y

Directionhas a

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

Rhythm creates viewer interaction through text layout. Arranged wordsimmediately 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.

Contrast isTRADITION

Rhythmcreates L IFE

11

Using colors effectively sophisticates the visual project. Key Club Graphic Standards colors are pantone colors. Simply put, they go well together when used respectfully. For the purpose of minimalism, always stick to to 2-3 colors. Here are some recommended color combinations that have good contrast.

C o l o r s

12

B a s i c R u l e s o f G r a p h i c D e s i g n

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.

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.

Just be good.

13

M i n i m a l i s m

Currently, society is transitioning to minimalism. Minimalism describes the removal of unneccessary elements and creation of a focus. Minimalism produces purpose by embracing space, creativity, efficiency, balance, and functionality. It usually relies on the audience to complete the picture. In other words, it makes your design stand out.

b r e a h e

14

A H E A D

rise

a n d s h i ne

15

F l a t D e s i g n

Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colors, and two-dimensional/flat illustrations composed of layered, manipulated shapes. Long shadows usually accompany flat design to provide depth.

16

M a t e r i a l D e s i g n

Material Design is a designing language developed by Google. It uses bold colors, padding, lighting, and shadows to create purpose and hierarchy. Layered “cards” expand and reform in producing sophisticated, responsive layouts for users across devices and platforms. Material Design follows a grid-based layout.

17

E x a m p l e s

18

night

WELCOME resonate

19

W e bD e v e l o p m e n t

</>

HTML

JQUERYJAVASCRIPT

CSS

W e bD e v e l o p m e n t

NOTIFICATIONS

C o d i n g L a n g u a g e s

HTML

CSS

Javascr ipt

jQuery

HyperText Markup Language

Cascading Style Sheets

HTML is the standard markup language used to create websites. Browsers translate contents of an HTML file into webpages.

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.

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

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

22

B a s i c S t r u c t u r e

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.

<!DOCTYPE html><html><head> <t i t le> Terms </t i t le></head><body><h1> The Basics </h1> <p>There are coding terms. </p></body></html>

<body>character(s)left-angle

bracketr ight-angle bracket

</body>character(s)left-angle

bracket

start tag end tagcontent

r ight-angle bracket

<t i t le> Terms </t i t le>

Element

Tag

Start Tag End Tag

23

S a m p l e C o d e

<!DOCTYPE html>

<html>

<head>

<tit le> KIWIN’S </t i t le>

</head>

<body>

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

<p> KIWIN’S, the 32nd dist r ict of Key Club International. . .</p>

</body>

</html>

(Spaced out for educational purposes.)

24

T r a n s l a t i o n

DEFINES DOCUMENT AS HTML

BEGINS HTML DOCUMENT

PROVIDES INFO ABOUT THE DOC

PROVIDES A T ITLE FOR THE DOC (VISIBLE ON TAB)

ENDS <head> TAG

VISIBLE CONTENT

HEADER TEXT

PARAGRAPH TEXT

END OF VISIBLE CONTENT

END OF HTML DOCUMENT

(Spaced out for educational purposes.)

For more coding t ips, v is i t codeacademy.com

25

C o d e E m b e d d i n g

SHARE

EMBED

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.

Embed Buttons

26

W e b s i t e R e q u i r e m e n t s

About Us

Upcoming/Past Events

Other Websites

Contact Us

Include the history of KIWIN’S

Update Bi-weekly (Every two weeks)

Include When, Where, What, flyers, and photos

List other schools’ websites in the division

Include District Projects (Governer’s Project, Major and Minor Emphasis)

Include kiwins.org and keyclub.org

Include club board profiles

Include club board contact information

27

T e m p l a t e s

Weebly

Squarespace

Wix

28

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.

Squarespace is a website builder and blogging platform for people who care about aesthetics and minimalism. It uses add-in features to build website layouts that stand out from Weebly and Wix. Squarespace subscription plans are pricey for the average student, but the appearance and interactive layout make it seem worth it.

drop here

29

D o ’ s a n d D o n ’ t s

When publishing content on your website, make sure it is academi-cally appropriate. Slang should NEVER be used in a post. Exceptions can be made to posts that are directly shared from the member’s experience or social media.

When placing the Cal-Nev-Ha KIWIN’S logo on the webpage, it must always be accompanied by the Key Club International Logo. The logos shall be placed next to each other and properly spaced by the width of the outer circle.

Whether you’re chatting on Social Media or writing about how great KIWIN’S is, it’s ALWAYS in caps! It is not spelt Kiwins / KIWINS / KIWINs / Kiwin. Your spelling represents our Key Club District so don’t get it wrong!

R

LMAO NO

KIWIN’S

30

M o b i l i z a t i o n

Did you know that the amount of mobile users surpassed the amount of desktop users in 2014? Therefore making your website mobile friendly is among the top priorities of your website. Most website builders already do optimize desktop websties to show on your mobile device.

31

V i d e oP r o d u c t i o n

V i d e oP r o d u c t i o n

B a s i c R u l e s o f V i d e o P r o d u c t i o n

Not everyone will have access to a professional camera with fancy bells and whistles, but from cell phone videos to professional DSLR footage, there are a certain set of rules that videographers must try to abide by.

Shaky or handheld footage, especially taken by a small camera or cell phone, can be displeasing to the eye. The footage from an iPhone may look great on the screen, but when blown up to show to a crowd, the noise and jitter in the footage will be apparent. Tripods or other means of steadying the camera will definitely boost quality.

34

The most important factor in video quality is lighting. Good lighting is everything and filming in dark or shaded areas without proper preparation can ruin footage.

Any good video will also have good audio. Using external microphones such as lavaliers, shotgun microphones, or external recorders will all help to achieve better audio. Quiet, indoor rooms are your friends if you don’t have access to better audio equipment.

35

P u b l i s h i n g V i d e o s

Great, you’re finally done with that new video! But now what? It’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 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 educaitonal purposes or satire. That means using copyrighted music in that club video is against the law if it is posted to Youtube.

36

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/

37

N e w s l e t t e r s

N e w s l e t t e r s

C o n f i g u r a t i o n s

1

2

4

Cover Page

Club Status

Table of Contents

Attracts readers visually

Notify members of hours and progress

Past & upcoming events overview

Short and simple

40

3

5Club Status

Events

Extras

Notify members of hours and progress

Past & upcoming events overview

Member of the Month, Board Corner, etc.

41

CRE TI EIMPLEMENTG R A P H I C S T A N D A R D S( t o )

CRE TI EWAYSIMPLEMENT KE Y CL U B

R

G R A P H I C S T A N D A R D S

C o l o r s

44

F o n t s

Garamond Premier Pro

Myriad Pro VerdanaCentury Gothic

Sans Serif

Serif

45

P e n c i l s

Hello.

46

D o o d l e s

MAZINGJOB

un ocknew doors

47

G r a p h i c E l e m e n t s

48

Begin.

Theto Success

49

T e c h n o l o g yR e l a t e dA w a r d s

T e c h n o l o g yR e l a t e dA w a r d s

C l u b P o s t e r

Include Key Club International Logo

Original

Promote Key Club International

Attracts and recruit new members

Use Graphic Standards

52

No bearing names of schools, communities, or districts

Theme not needed

Visually Appealing

18 x 24in

53

C l u b T - S h i r t

Aesthetic Appeal

CreativityOriginal

Uniqueness

54

Promotes KIWIN’S

No professional assistance

Encouraged to follow theme

55

C l u b V i d e o

Promote Key Club International or KIWIN’S

No professional help

No copyrighted music

56

Original, high quality footage

Cannot spend more than $200 for production$

57

C l u b W e b p a g e

KIWIN’S orientated/KIWIN’S related content

User friendly/Easily accessible

Web blogs are not qualified

Accurate, current, updated content

58

Original material Proper Grammar/Spelling

Abc

Innovative, interactive, creative

Links to District Website

.org

Functions well with/without images

Loading time reasonable

59

S o c i a lM e d i a

S o c i a lM e d i a

Facebook

Establish Facebook groups to keep members notified and organized whenever releasing information.

Profile pictures, photos or graphics, must display professionalism.

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

Create event pages for service events or fundraisers.

Create a physical Facebook account that represents the club as a whole.

62

Establish Facebook groups to keep members notified and organized whenever releasing information.

Create event pages for service events or fundraisers.

Create a physical Facebook account that represents the club as a whole.

63

I n s t a g r a m

Post graphics, flyers, or high quality photos.

64

S n a p c h a t

T

Quick, informal messages for members

65

S o f t w a r ea n d

H a r d w a r e

++

_=

S o f t w a r ea n d

H a r d w a r e

G r a p h i c D e s i g n

Ai

Ps

Adobe Illustrator is highly recommended for high resoultion 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.

Abobe Photoshop is an alternative to Adobe Illustrator, though it is more geared towards photo editing andillustration. Photoshops allows graphic pen stability forillustrating and basic photo editing options unlike Illustrator. Most artists prefer Photoshop for their work.

68

A graphics tablet is useful in providing the designer the efficiency of a pen and paper rather than a mouse or trackpad. Graphics Tablets come in many brands and sizes, Wacom Tablets being one of the reputable.

69

W e b D e v e l o p m e n t

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.

Dw

70

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.

</></></></>

71

V i d e o P r o d u c t i o n

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.

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.

Ae

Pr

72

For first time or more casual video producers, Windows Movie Maker or 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 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.

73

District Technology Committee Contact Information

Kevin SonDistrict Technology Chair

kiwins.techchair@gmail.com

Mrs. RossTechnology Committee Advisor

kiwinsdiamondra@gmail.com

Nhung TranHead of Graphic Design

nhung654.tran@gmail.com

DiAngelo SorianoHead of Video Production

diangelosoriano@gmail.com

Alvin LeeHead of Web Development

galaxyalvin@gmail.com

Thanks for reading!