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â&#x20AC;&#x2122;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 â&#x20AC;&#x153;cardsâ&#x20AC;? 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â&#x20AC;&#x2122;t have access to better audio equipment.
35
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 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â&#x20AC;&#x2122;S
55
Club Video
No copyrighted music
Promote Key Club International or KIWINâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;S orientated/ KIWINâ&#x20AC;&#x2122;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
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!