CNH KIWIN'S 2015-2016 Official Guide to Technology Manual

Page 1

TECHNOLOGY MANUAL 2015-2016


Table of Contents

04 Technology Committee Introduction 06 Roles and Duties 08 Graphic Design 20 Web Development 32 Video Production 38 Newsletters 02


42 Creative Ways to Implement Key Club Graphic Standards

50 Technology Related Awards 60 Social Media 66 Software and Hardware 74 Closing

03


Technology Committee Introduction

Hello. I’m Kevin Son District Technology Chair

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 04

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!


Head of Graphic Design 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.

Head of Web Development 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 contemporary design and others through the kiwins.org webstie. Overall, this committee changed my life and my love for serving my home, school, and community.

Head of Video Production 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. 05


Technology Chair: Roles and Duties

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


Grap Des


phic sign


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 10

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


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

12


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.

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


Minimalism

brea

he

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.

14


in

e

rise

d n sh a

AHEAD

15


Flat Design

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


Material Design

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


Examples

18


night

WELCOME

resonate

19


HTML

CSS

JAVASCRIPT

JQUERY

</>

We Develo


NOTIFICATIONS

eb opment


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 Styl 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 avasc 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.

22


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 tm 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

<body>

< /b o d y >

le f t- a n g le bracket

charact er(s )

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

left-angle bracket

charact er(s )

righ t -a n gl e br a c k e t

El e m e n t

< title> Terms </title> start tag

co n t e n t

end tag 23


Sample Code

(Spaced out for educational purposes.)

<!DOCTYP E html> <h tml> <h ead> <ti tle> KIWIN’S </title> </head> <body> <h 1>One Family. One Mission. One Word: KIWIN’S </h1> <p> KIWIN’S, the 32nd district of Key Club International...</p> </body> </html>

24


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 HEADER TEXT PARAGRAPH TEXT END OF VISIBLE CONTENT END OF HTML DOCUMENT

Fo r mo r e c o ding tips, vi si t cod eacad emy.com

25


Code Embedding

SHARE

EMBED

26

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 Include the history of KIWIN’S Include District Projects (Governer’s Project, Major and Minor Emphasis)

Include club board profiles

Upcoming/Past Events Update Bi-weekly (Every two weeks) Include When, Where, What, flyers, and photos

Other Websites List other schools’ websites in the division Include kiwins.org and keyclub.org

Contact Us Include club board contact information 27


Templates

Weebly

Wix

Squarespace

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.

drop here

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.

29


Do’s and Don’ts

R

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.

KIWIN’S 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!

LMAO NO When publishing content on your website, make sure it is academically 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. 30


Mobilization

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


Vid Produ


deo uction


Basic Rules of Video Production

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


Publishing Videos

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


New


sletters


Configurations

4

2

Club Statu

Notify members of hours

Table of Contents Short and simple

Cover Page Attracts readers visually 40

Past & u

1


Extras Member of the Month, Board Corner, etc.

us

5

s and progress

Events

upcoming events overview

3

41


CRE TI

IMPLEMENT

(to)

GRAPHIC


E WAYS

KE Y CL U B

R

STANDARDS


Colors

44


Fonts

Sans Serif Century Myriad Pro Gothic

Verdana

Serif

Garamond Premier Pro

45


Pencils

Hello.

46


Doodles

MAZING JOB

un ock

new doors 47


Graphic Elements

48


Begin. The to Success 49


Techn Rela Awa


ology ated ards


Club Poster

Attracts and recruit new members

Promote Key Club International

Include Key Club International Logo Use Graphic Standards

Original 52


Theme not needed

Visually Appealing

18 x 24in

No bearing names of schools, communities, or districts 53


Club T-Shirt

Aesthetic Appeal

Creativity Original

Uniqueness 54


Encouraged to follow theme

No professional assistance

Promotes KIWIN’S

55


Club Video

No copyrighted music

Promote Key Club International or KIWIN’S

No professional help 56


$

Cannot spend more than $200 for production

Original, high quality footage 57


Club Webpage

Accurate, current, updated content

Web blogs are not qualified

User friendly/ Easily accessible

58

KIWIN’S orientated/ KIWIN’S related content


Loading time reasonable Functions well with/ without images

.org Links to District Website

Innovative, interactive, creative

Abc Original material

Proper Grammar/ Spelling 59


Soc Med


cial dia


F a ce b o o k

Establish Facebook groups and organized whenever r Profile pictures, photos or graphics, must display professionalism.

Create e

62

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

Create a club as a


s to keep members notified releasing information.

event pages for service events or fundraisers.

a physical Facebook account that represents the a whole. 63


Instagram

Post graphics, flyers, or high quality photos.

64


Snapchat

T

Quick, informal messages for members

65


Softw an Hard

+

_ + =


ware nd ware


Graphic Design

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

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


Web Development

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


Video Production

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

Mrs. Ross

District Technology Chair

Technology Committee Advisor

kiwins.techchair@gmail.com

kiwinsdiamondra@gmail.com

Nhung Tran

Alvin Lee

Head of Graphic Design

Head of Web Development

nhung654.tran@gmail.com

galaxyalvin@gmail.com

DiAngelo Soriano Head of Video Production diangelosoriano@gmail.com

Thanks for reading!


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.