Now that your team has created a non-digital prototype, how can you all make this come to digital life? Well you have a few options for those less comfortable to more comfortable with coding!
Remember: You are not expected to have a perfect finished design at the end of this hackathon! You will not be judged on how “finished” your idea is, just how good it is and how well the judges understand it.
A native application is an app that exists on a smartphone without necessarily being connected to the internet. Examples: Google Maps, Instagram, SnapChat, Uber, etc.
Marvel: This tool allows you to create a prototype of an app with animations, gestures, and transitions without having to code. You can create a prototype directly from their website and test on an iPhone or iPad with their app. What's awesome is that multiple people can collaborate on one prototype. Check out tutorials here.
InVision: This tool is very similar to Marvel but with more capabilities of animations, gestures, etc. but you have to design the screens in a separate piece of software, like Photoshop. If you miss the workshop on this tool, feel free to check out their tutorials here.
LightWell: This tool allows you to create apps for iOS without having to code. It has an accompanying app for iOS that allows you test your app as you go. Sign up for the free trial on their website to download the software. If you don't have a chance to go to the workshop, check out their tutorials here.
AppInventor: This tool allows you to create apps for Android. The programming is quite simple and very similar to Scratch or Snap and the website is available to use through any browser on any device, but the app you build can only be used on an Android device. If you would like to use this tool and don't have an Android phone yourself, find the "Hardware" room and if you can't find it, email one of the organizers: eharris@archer.org and she will help you out:
XCode & Swift: XCode and Swift are tools used to create apps for macOS, iOS, watchOS, and tvOS. XCode is an IDE and Swift is a programming language developed by Apple that allows you to develop apps for their operating systems. Therefore, you will need a macOS laptop to be able to use XCode and Swift. If you are not able to make it to the workshop, we recommend the following tutorials to get started:
A web application is an app that can be used in a browser like Safari or Chrome. Examples: Facebook, Google Docs, Google Slides, or any of the Google applications, or something as simple as Adobe's Color Picker.
Marvel:This tool allows you to create a prototype of a website with animations, gestures, and transitions without having to code. You can create a prototype directly from their website and test on any device. What's awesome is that multiple people can collaborate on one prototype. Check out tutorials here.
InVision: This tool is very similar to Marvel but with more capabilities of animations, gestures, etc. but you have to design the screens in a separate piece of software, like Photoshop.. If you miss the workshop on this tool, feel free to check out their tutorials here.
HTML & CSS: These are two languages used to build static webpages. There are two tools we suggest using that allows you to write in these two languages: JSFiddle for the less comfortable and Brackets for the more comfortable. JSFiddle is a text editor in a browser while Brackets is a text editor application on your computer. JSFiddle allows you to skip over some semantics of HTML while Brackets needs you to include those semantics.
Now that you have a text editing tool you want to use, what is HTML and CSS?
HTML is the language used to determine the structure of your website.
CSS is the languages used to style your website.
We suggest using w3Schools as your main resource for both of these languages.
Chances are if you feel more comfortable with web programming you probably have a text editing tool you prefer to use. But, there are two tools we suggest using that allows you to create websites: JSFiddle for the less comfortable and Brackets for the more comfortable. JSFiddle is a text editor in a browser while Brackets is a text editor application on your computer. JSFiddle allows you to skip over some semantics of HTML while Brackets needs you to include those semantics.
Javascript: Javascript is a programming languages that allows you to create dynamic webpages. With only HTML and CSS a webpage is static, meaning it can't react to user input.
P5.js: This is a Javascript framework that is used mainly by artists. It allows you to treat a webpage like a canvas where you can draw whatever you like! The framework can either be used in your website or you can use the text editor in a browser. If you missed the workshop on it, we suggest checking out the following tutorial videos; there are many and they are long so you may need to sift through them.
Bootstrap: Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. This is very helpful for creating a web app for smartphones because you don't have to create the responsive HTML, CSS, and JavaScript from scratch. Again, we suggest using w3schools to better understand how to use it. Also, there are some basic, free Bootstrap themes that you can get from here or here.
A device is a physical object that takes in input and produces some output. This can be as complicated as a smartphone, a Fitbit or Google Glasses to as simple as an alarm clock or a thermometer.
LittleBits: This tool is like Legos for electronics! You can easily snap together different sensors and outputs without having to deal with the challenge of figuring out the wiring. Check out the inventions of other makers. If your team wants to try out LittleBits, find the "Hardware" room and if you can't find it, email one of the organizers: eharris@archer.org and she will help you out.
Arduino: This tool is a micro-controller, which is essentially a very small computer. Using a few wires and breadboard, you can collect input (a clicked button, a loud noise, a temperature change, etc.) and create some output (LEDs, motors, etc.). It's a very powerful tool, check out the endless projects here. If you would like to use and Arduino or even play around with one, find the "Hardware" room and if you can't find it, email one of the organizers: eharris@archer.org and she will help you out.