RHOK Jr

Welcome to Random Hacks of Kindness Jr.! Before you begin designing your solution, make sure to discuss your options with your STEM Mentors and charity stakeholders. Once you've done this, and you're ready to learn more about the tools to build your solution(s), click [[OK|Origin]].

Are you looking for... 1. [[Tools to Build an App| APPTOOLS]] 2. [[App Design Tips| APPDESIGN]] If what you're looking for isn't here, you should talk with the people around you! -- [[Back->Origin]]

To design a website, you'll be working primarily with HTML and CSS. Here are some tools you can use. 1. (link: "*CodeAcademy Tutorials (Start Here if you know no HTML)*")[(gotourl: "https://www.codecademy.com/learn/web")] 2. [[Thimble|THIMBLEWEB]] 3. (link: "*CHTML and CSS Cheat Sheet*")[(gotourl: "http://www.webmonkey.com/2010/02/html_cheatsheet/")] 4. (link: "*W3 (A BUNCH of tutorials for building webpages)*")[(gotourl: "http://www.w3schools.com/")] 5. Click [[here|SITEDESIGN]] if you want to learn more about website design tips. (Or, ask your mentors for additional options.) --- [[Back->Origin]]

Your organization may already have social media accounts in place. Check with them to ensure that you're using what they want you to use. Also, it may be best to make a paper model or test page first. [[OK.|SMC]] --- [[Back->Origin]]

You're making a Media Project? Great! ...You know how to take a video using a phone or tablet, right? [[Yes|VIDS]] [[No|MNO]]

Which app-making resource would you like to know more about? 1. [[Mozilla Web Maker | MOZILLAWEBMAKER]] 2. [[MIT App Inventor | MITAPPINVENTOR]] 3. [[Thimble (Open HTML Editor)|THIMBLE]] --- [[Back-> APP]]

Here are some great tips about App Design! 1. (link: "*Style Tools from CreativeBloq*")[(gotourl: "http://www.creativebloq.com/app-design/16-killer-design-tips-creating-mobile-apps-11513821")] 2. (link: "*How to Layer Multiple (Buffered) Images*")[(gotourl: "http://stackoverflow.com/questions/11148453/layer-multiple-bufferedimages-on-top-of-one-another")] 3. (link: "*How to Use Location Services (Java)*")[(gotourl: "https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/LocationAwarenessPG/CoreLocation/CoreLocation.html")] --- [[Back-> APP]]

Below are some resources to help with Mozilla WebMaker. 1. (link: "*Mozilla Webmaker Download*")[(gotourl: "https://beta.webmaker.org/#/?_k=rqz5yl")] 2. (link: "*Intro to App-making in WebMaker Video*")[(gotourl:"https://www.youtube.com/watch?v=km6lA8N_ZDw")] --- [[Back-> APPTOOLS]]

MIT App Inventor is a drag-and-drop app builder from MIT and Google. Below are some resources to help with it. 1. (link: "*Setup and Download*")[(gotourl: "http://appinventor.mit.edu/explore/ai2/setup.html")] 2. (link: "*Tutorials on how to build certain apps*")[(gotourl: "http://appinventor.mit.edu/explore/ai2/tutorials")] 3. (link: "*App Inventor Tutorial Playlist*")[(gotourl: "https://www.youtube.com/playlist?list=PLsxoqvm6HPQV5XMPwN4N0tYIe7asB81PS")] --- [[Back-> APPTOOLS]]

Thimble is an open-source HTML editor. Resources to help with it are below. 1. (link: "*Thimble Webpage*")[(gotourl: "https://thimble.webmaker.org/en-US/")] 2. (link: "*Thimble Intro Video*")[(gotourl: "https://www.youtube.com/watch?v=KIZJIkmCi6A")] [[Back-> APPTOOLS]]

You're going to design something? Hooray! What are you going to design? 1. [[New Logo|NEWLOGO]] 2. [[Print Advertisement|PRINTAD]] 3. [[A Floorplan, Environmental Plan, or Something Physical|SKETCHUP]] If there's anything else you want to make, ask your mentors for help! --- [[Back->Origin]]

You want to learn more about website design? You must be a really cool, stylish person! That's great! Here are some general tips on website design. 1. [[Five-second rule|FIVESECONDRULE]] 2. [[Predict User's Needs|USERNEEDS]] 3. [[Avoid Huge Text Blocks|AVOIDHUGEBLOCKS]] 4. [[Stay Organized|STAYORGANIZED]] 5. [[Use Contrasting Colors|CONTRASTINGCOLORS]] --- [[Back-> WEBSITE]]

Make sure that any user can find what they're looking for within 5 seconds. [[Back->SITEDESIGN]]

Try to imagine another person looking at your website for the first time. Can you find everything you need? You may be able to test this with a member of your team who hasn't seen the website yet! [[Back->SITEDESIGN]]

Do you like reading huge walls of text? Probably not -- and users won't, either. Keep descriptions as simple as possible. --- [[Back->SITEDESIGN]]

If you can't find where something is on your website, how will a user be able to? Use headers whenever you need them! [[Psssst, don't click this.|SECRET]] --- [[Back->SITEDESIGN]]

Have you ever tried reading pink text on a red background? I don't recommend it. Remember that combinations like black/white and blue/yellow tend to be easiest on the eye. --- [[Back->SITEDESIGN]]

Which Social Media account will you use? 1. [[Facebook|FACEBOOK]] 2. [[Instagram|INSTAGRAM]] 3. [[Snapchat|SNAPCHAT]] 4. [[Youtube|YOUTUBE]] If you have any other platforms in mind, talk about them with your mentors and stakeholders! [[Back->Origin]]

Make sure to talk with your mentors and stakeholders about adding content! They'll be able to provide you with a lot of resources as well! 1. (link: "*Getting Started: How to create a page*")[(gotourl: "https://www.facebook.com/help/104002523024878")] 2. (link: "*Advanced: How to add and modify tabs at the top of a page*")[(gotourl: "https://www.facebook.com/help/371634529571035/")] --- [[Back->SMC]]

Below are some resources to help set up a successful Instagram. 1. (link: "*How to set up an Instagram for a Business or Organization*")[(gotourl: "http://www.outboundengine.com/blog/how-to-set-up-an-instagram-business-account/")] 2. (link: "*Tips from Instagram about Polishing and Organization's Profile*")[(gotourl: "https://business.instagram.com/")] --- [[Back->SMC]]

Here are some resources to help with Snapchat! 1. (link: "*How to Make a Snapchat for a Business or Organization*")[(gotourl: "http://blogs.constantcontact.com/snapchat-for-business/")] 2. (link: "*How to Begin Building a Following on Snapchat*")[(gotourl: "http://new.soldsie.com/blog/8-easy-ways-to-build-a-following-on-snapchat/")] How to Begin Building a Following on Snapchat --- [[Back->SMC]]

Here are some resources to help with YouTube! 1. (link: "*How to Create a Channel for an Organization*")[(gotourl: "https://support.google.com/youtube/answer/1646861?hl=en")] 2. (link: "*How to Set a Featured Video*")[(gotourl: "https://support.google.com/youtube/answer/6147702?hl=en")] 3. (link: "*How to Make an Intro for Videos Using Blender*")[(gotourl: "https://www.youtube.com/watch?v=yE84PMtHoAY")] --- [[Back->SMC]]

I TOLD YOU NOT TO CLICK THIS!!!!! :( :( :( :( :( :( :( --- [[Back->STAYORGANIZED]]

You don't know how to take a video? Really? ... ... ... (keep scrolling) ... (link: "*Ugh.*")[(gotourl: "http://www.imore.com/how-to-record-video-iphone-ipad")] Also, someone in your group probably knows how. Ask them. [[Ok.|VIDS]]

Talk to your group members, mentors, and stakeholders about what kinds of videos you're looking for. If you need any live-action videos, use your phone or tablet. [[OK.|VIDEOS]]

What do you want to do with your videos? 1. [[Make an Intro|VIDINTRO]] 2. [[Edit them|VIDEDIT]] [[Back->VIDS]]

Blender is an easy-to-use software for making intros for your YouTube videos. (link: "*Here*")[(gotourl: "https://www.youtube.com/watch?v=yE84PMtHoAY")] is a tutorial about how to make intros using Blender. [[Back->VIDEOS]]

You'll likely be using iMovie to edit your videos. Here are some resources for iMovie. 1. (If you're not on a Mac) (link: "*Here*")[(gotourl: "http://www.apple.com/mac/imovie/")] is an iMovie Download link. 2. And (link: "*HEEEERE*")[(gotourl: "http://www.izzyvideo.com/imovie-tutorial/")] are iMovie tutorials for LITERALLY EVERYTHING. --- [[Back->VIDEOS]]

Before you start designing a new logo, make sure your stakeholder //actually wants one//. Once you've established this, get started below. 1. (link: "*Logo Design (and re-design) Tips*")[(gotourl: "http://www.1stwebdesigner.com/logo-design-tips/")] 2. (link: "*List of Free Design Software*")[(gotourl: "http://www.creativebloq.com/graphic-design/free-graphic-design-software-8134039")] --- [[Back-> ADVDESIGN]]

Before you design a Print Advertisement, make sure your stakeholder //actually wants one//. Did you ask them? If you didn't ask them, go ask them now. Anyway, once they say yes, here are some resources to help design print ads: 1. (link: "*Tips for Designing Print Ads*")[(gotourl: "http://linchpinseo.com/10-tips-for-creating-effective-print-advertising-designs")] 2. (link: "*Sample and Stock Layouts for Print Ads*")[(gotourl: "http://www.stocklayouts.com/Templates/Print-Ad/Print-Ad-Templates-Designs-Library.aspx")] --- [[Back-> ADVDESIGN]]

To design something 2-D or physical that *isn't* an Ad or logo, you'll probably use (link: "*Google Sketchup*")[(gotourl: "http://www.sketchup.com/")], a tool that lets you draw in 3D and 2D. Below are some extra tips for using Sketchup in its different forms. 1. (link: "*Sketchup in 2D*")[(gotourl: "https://www.youtube.com/watch?v=GlGVmYg8bZs")] 2. (link: "*Sketchup in 3D*")[(gotourl: "https://www.youtube.com/watch?v=ofpTeJVmwgA")] --- [[Back-> ADVDESIGN]]