-
Notifications
You must be signed in to change notification settings - Fork 0
/
cms.html
303 lines (229 loc) · 12.3 KB
/
cms.html
1
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Index ~ Make an iOS and Android App ~ Girl Develop IT</title> <meta name="description" content="This is the Girl Develop It curriculum to teach women how to make an iOS and/or Android app with Buzztouch. Buzztouch is a content management system for making apps. Content is on the control panel, and the app is compiled in Xcode or Android Studio. The course is meant to be taught in 2 hours, with a third optional hour to assist students with making and compiling their apps."> <meta name="author" content="Girl Develop It"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="stylesheet" href="reveal/css/reveal.css"> <link rel="stylesheet" href="reveal/css/theme/gdidefault.css" id="theme"> <!-- For syntax highlighting --> <!-- light editor<link rel="stylesheet" href="lib/css/light.css">--> <!-- dark editor--><link rel="stylesheet" href="reveal/lib/css/dark.css"> <!-- For use of font-awesome icons --> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="css/global.css"> <!-- If using the PDF print sheet so students can print slides--> <link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print"> <!--[if lt IE 9]> <script src="lib/js/html5shiv.js"></script> <![endif]--> </head> <body> <div class="reveal"> <!--Any section element inside of this container is displayed as a slide--> <div class="slides"> <!-- Opening slide --> <section> <img src = "images/gdi_logo_badge.png"> <h3>iOS and Android Apps</h3> <h4>The Buzztouch CMS</h4> </section> <!-- Introduction and housekeeping --> <section class="hide-pdf"> <h3>Welcome!</h3> <div class = "left-align"> <p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p> <p class ="green">Some "rules"</p> <ul> <li>We are here for you!</li> <li>Every question is important</li> <li>Housekeeping</li> <li>Introduce TAs</li> <li>Help each other</li> <li>Have fun</li> </ul> </div> </section> <!-- Introductions --> <section> <h3>Introductions</h3> <div class = "left-align"> <p class = "blue">Tell us about yourself.</p> <ul> <li>What is your name?</li> <li>What experience do you have with programming, making apps, or making websites?</li> <li>What do you hope to get out of the class?</li> </ul> </div> </section> <!-- Agenda --> <section> <h3>Training agenda</h3> <div class = "left-align"> <p class = "blue">The plan for today's training.</p> <ol> <li>Register for Buzztouch and set up first app on the Buzztouch control.</li> <li>Compile your app in iOS or Android. (We will split into two groups for this.)</li> <li>Add content to your app with the Buzztouch Control Panel</li> <li>Show and Tell your apps!</li> </ol> <br/> <br/> <br/> <b><p class = "blue">Before we start, does everyone have either Xcode or Android Studio installed?</p></b> </div> </section> <!-- About Buzztouch --> <section> <h3>What is Buzztouch?</h3> <div class = "left-align"> <p class = "blue" style="font-size:.9em">Buzztouch is an open source "app engine" that powers tens of thousands of iPhone, iPad and Android applications with its Content Management System (CMS). </p> <ul style="font-size:.7em"> <li>Buzztouch empowers you to make an app without code, but gives you full access to the code.</li> <li>You (and your clients) can add content to the app on a Control Panel.</li> <li>It is powered by mySQL/PHP which create the content for the app in JSON.</li> </ul> </div> </section> <!-- Why Buzztouch --> <section> <h3>Why Buzztouch?</h3> <div class = "left-align"> <p class = "blue">Buzztouch is ideal for "aspiring" developers</p> <ul style="font-size:.8em"> <li>Users can make an app without code.</li> <li>As users gain experience, they learn to modify the code.</li> <li>You own the code. Buzztouch gives you all the code for your app. </li> <li>While you can make a nice app with free plugins, there is a plugin market where you can purchase additional functionality for your apps. </li> <li>As you gain skill at adding code for new app features, you can sell your code on the plugin market. </li> <li>You can self-host the Buzztouch Control Panel, which allows you to change the CSS to match your company's CSS. </li> </ul> </div> </section> <!-- Alternatives to Buzztouch --> <section> <h3>Alternatives</h3> <div class = "left-align"> <p class = "blue">Are there alternatives to Buzztouch?</p> <ul style="font-size:.8em"> <li>Web-apps and responsive websites</li> <li>Javascript-based programs, like Appcelerator. You write the app code in Javascript for both iOS and Android.</li> <li>Beware of alternatives that use Buzztouch open-source code but sell it to users. </li> </ul> </div> </section> <!--Register for Buzztouch--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 1: Register for Buzztouch</p> <p><a href = "https://www.buzztouch.com/pages/register.php">https://www.buzztouch.com/pages/register.php</a></p> <img src = "images/register.png"> <p style="font-size:.7em">After you register, you must confirm your membership via email.</p> </section> <!--Set up Developer Profile--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 2: Set up your developer profile</p> <p><a href = "https://www.buzztouch.com/account/developer.php">https://www.buzztouch.com/account/developer.php</a></p> <img src = "images/profile.png"> </section> <!--Add Plugins--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 3: Add the Menu with Image Plugin</p> <p><a href = "https://www.buzztouch.com/plugins/">https://www.buzztouch.com/plugins</a></p> <img src = "images/plugin.png"> </section> <!--Create an app--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 4: Create an app</p> <p style="font-size:.8em">Account -> Applications -> + New App ->Create a new App</p> <img src = "images/create2.png"> </section> <!--Upload Icon--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 5: Upload an icon</p> <p style="font-size:.8em">Account -> Applications -> Select Your Application -> App Icon</p> <p>The icon file should be 1024 x 1024 pixels.</p> <img src = "images/icon.png" style="max-width:50%"> </section> <!--Add Plugins to app--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 6: Select plugins to download</p> <p style="font-size:.8em">Account -> Applications -> Select Your Application -> Download iOS or Android Project -> Choose Plugins to Include ->Select All </p> <img src = "images/addplugins.png" style="max-width:70%"> </section> <!--Download app package--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 7: Download App Package</p> <img src = "images/download.png"> </section> <!--Compile your app!--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p>It is time to compile your app in Xcode or Eclipse! </p> <p><a href = "http://gdiminneapolis.com/gdi-app-class/index.html#/">Return to Landing Page</a></a></p> </section> <!-- Question --> <section> <h2>Questions?</h2> <p>All slides are avaliable to download at <a href="https://github.com/smoyen/gdi-intro-html-css">github.com/smoyen/gdi-intro-html-css</a></p> <p><small>* Pro tip: Reading code is one of the best ways to learn how to code.</small></p> <h4>Resources</h4> <ul> <li>Helpful links: <ul style="font-size:28px"> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></li> <li><a href="http://www.w3schools.com/tags/default.asp" target="_blank">http://www.w3schools.com/tags/default.asp</a></li> <li><a href="http://www.stackoverflow.com" target="_blank">http://www.stackoverflow.com</a></li> </ul> </li> <li><p><small>Google Tip: MDN (Mozilla Developer Network) is a great alternative to the W3Schools website. Append the letters MDN in front of your search to receive MDN specific results. Try it! Google "MDN html tags"</small></p></li> </ul> <!--div style = "font-size:1000%; height:100%; margin: 20% 0 10%;" class ="blue">?</div>--> <div class ="clear"></div> <br/> <p class="hide-pdf"><i class="fa fa-arrow-circle-left"></i> <a href="index.html#/">Back to Slides Index</a></p> </section> </div> <footer> <div class="copyright"> HTML/CSS ~ Girl Develop It ~ <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a> </div> </footer> </div> <script src="reveal/lib/js/head.min.js"></script> <script src="reveal/js/reveal.min.js"></script> <script> // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: true, progress: true, history: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none // Optional libraries used to extend on reveal.js dependencies: [ { src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); </script> </body></html>