Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meetup js 013115

578 views

Published on

Tacoma-JS meetup presentation including selected schools, books, text editors, a basic Bootstrap web page leading to the next step of our goal to create a weather delivery app that we can publish on our Github account.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Meetup js 013115

  1. 1. Javascript beginners lightning round Today’s Event hosts • St. Patrick’s Church & School - Tacoma • Knights of Columbus Tacoma Council 809 • Moderator: Joe Devlin • Access this slide at: http://www.vividventures.biz/d/?q=node/8 1/31/2015 1parish.saintpats.org kofc809.org
  2. 2. A word from our hosts •St. Patrick’s Church – Tacoma o The pastoral council has generously offered us this location for today, as part of the churches community outreach. o Founded in 1892 o Aligned with St. Patrick’s Catholic School link o Reference: The Bible o Working on the Engaged Church model “Growing an Engaged Church” by Albert Winseman, Gallup Press, ISBN 978-1-59562-014-9 o Promoting personal development with Strengths Finder. “Strengths Finder” by Tom Rath, Gallup Press, ISBN 978-1-59562-015-6 strengthsfinder.com 1/31/2015 2parish.saintpats.org kofc809.org
  3. 3. A word from our hosts • Knights of Columbus www.kofc.org o Founded in 1882 o Dedicated to “Saving Lives and Changing Lives” o Promoting strong families through charitable giving and a AAA rated life insurance and annuity program. o Local projects Habitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care, Coats for Kids, Wheelchair Mission. 1/31/2015 3parish.saintpats.org kofc809.org
  4. 4. Introduction •Joe Devlin - moderator o Member of St Patrick’s Parish and K of C council 809 o Working as a web host for small to medium sized businesses. o Interested in Javascript for the obvious reasons that it is a must for web development, plus for the purposes of getting people together to code; JS is a universal standard that comes with freely downloadable browsers and tools. We can easily collaborate. 1/31/2015 4parish.saintpats.org kofc809.org
  5. 5. Time management 1/31/2015 5parish.saintpats.org kofc809.org Present Code Discuss
  6. 6. 1/31/2015 6parish.saintpats.org kofc809.org Schedule 0830-0845 Set-up laptops, coffee and pastries 0845-0900 Introduce ourselves 0900-1000 Beginners Lightning Round - Bootstrap 1000-1015 Break 1015-1130 https://github.com/Tacoma-JS projects weather app 1100-1200 Node.js discussion? 1200-1230 Lunch
  7. 7. Rest Rooms • Down the hall passed the fireside room 1/31/2015 7parish.saintpats.org kofc809.org
  8. 8. Attendee Introduction • Let each of us introduce ourselves o My name is ____________. (First name) o Working as a ____________, or looking for work as a _________. o A quick tip for beginner coders is _____________. o I have: a) Never coded before, and this is my first day. b) Javascript is my first coding language and I am in my first few months c) I know several languages and am just now beginning to learn Javascript d) I know several languages and have been working on Javascript for several months. 1/31/2015 8parish.saintpats.org kofc809.org
  9. 9. Feedback / Comment review 1/31/2015 9parish.saintpats.org kofc809.org • Online schools o Pierce County Library  Lynda.com - prepaid w/ tax dollars  Teamtreehouse.com - prepaid w/ tax dollars o Codecademy - free o Bento.io - free o Khanacademy - free o W3schools – free o tutorialspoint.com o asmarterwaytolearn.com – buy the book o tutsplus.com - free and fee o letscodejavascript.com – (TDD) not free
  10. 10. Feedback / Comment review 1/31/2015 10parish.saintpats.org kofc809.org • Text Editors or IDE o Sublime for Windows, Linux, and Mac OSX o VIM - for Windows, Linux, an Mac OSX o Atom – node.JS based hackable o Brackets o Notepad++ for windows o Text++ for IOS o Webmatrix cloud-connected web development tool o Visual Studio o Xcode for the Mac o Construct2 for gaming o GameSalad “ “ o Net+ ? o NetBeans IDE for Windows, Linux, an Mac OSX o Vi – Linux terminal based o Pico, Nano - Linux terminal based o UltraEdit – 30 day trial – fee based
  11. 11. Taking advantage of online schools 1/31/2015 11parish.saintpats.org kofc809.org • Codecadamy.com – Mike Myers • Pierce County Library o Teamtreehouse.com o Lynda.com • w3schools.com • tutorialspoint.com • Books: http://www.it-ebooks.info/ • Quick notes
  12. 12. Bootstraping a web page: Setup 1/31/2015 12parish.saintpats.org kofc809.org In your text editor… • Blank o Create a blank for template: http://vividventures.biz/examples/frameworks/bootstrap/101/template_blank.html • Step A - header o Goto: http://getbootstrap.com/getting-started/ o http://getbootstrap.com/getting-started/#template o In the page header add links for plugins and template : http://vividventures.biz/examples/frameworks/bootstrap/101/template_a.html
  13. 13. 1/31/2015 13parish.saintpats.org kofc809.org Bootstrap webpage: Step A header Source: http://vividventures.biz/examples/frameworks/bootstrap/101/template_a.html
  14. 14. Bootstraping a web page: Setup 1/31/2015 14parish.saintpats.org kofc809.org • Step B - navbar in body o Goto: http://getbootstrap.com/components/#navbar o In the body add the <div><ul><li> for the navbar: http://vividventures.biz/examples/frameworks/bootstrap/101/template_b.html
  15. 15. 1/31/2015 15parish.saintpats.org kofc809.org Bootstrap webpage: Step B navbar in body Source: http://vividventures.biz/examples/frameworks/bootstrap/101/template_b.html
  16. 16. 1/31/2015 16parish.saintpats.org kofc809.org Bootstrap webpage: Step B navbar in body Source: http://vividventures.biz/examples/frameworks/bootstrap/101/template_b.html
  17. 17. Bootstraping a web page: Body 1/31/2015 17parish.saintpats.org kofc809.org • Step C – main content component in body o Goto: http://getbootstrap.com/getting-started/#examples o http://getbootstrap.com/examples/navbar/ o In the body below the navabar add <div> component for the message or call to action: http://getbootstrap.com/components/#jumbotron o Note the container div tags surround everything in the <body>. o http://vividventures.biz/examples/frameworks/bootstrap/101/template_c.html
  18. 18. 1/31/2015 18parish.saintpats.org kofc809.org Bootstrap webpage: Body Source: http://vividventures.biz/examples/frameworks/bootstrap/101/template_c.html
  19. 19. Bootstraping a web page: Detail 1/31/2015 19parish.saintpats.org kofc809.org •Step D – Mock up a weather widget in main content component o Goto: http://www.accuweather.com/en/downloads o http://www.accuweather.com/en/free-weather-widgets/current o In the body below the view-components button add <div> Accuweather widget: http://vividventures.biz/examples/frameworks/bootstrap/101/template_d.html# o Inspect the widget and see the JavaScript just for fun: o http://oap.accuweather.com/launch.js
  20. 20. 1/31/2015 20parish.saintpats.org kofc809.org Bootstrap webpage blank Source: http://vividventures.biz/examples/frameworks/bootstrap/101/template_d.html
  21. 21. DeMinifying Javascript 1/31/2015 21parish.saintpats.org kofc809.org •Copy the text of the compressed Javascript o Goto: http://minify.avivo.si/#results o Paste the text into the Step 3 generate field: o Press the generate button o Copy code from “Your code is ready” o Paste prettified code into your text editor.
  22. 22. GitHub for collaboration 1/31/2015 22parish.saintpats.org kofc809.org • https://github.com/Tacoma-JS o Weather App Ideas o Simple free widget downloads  http://www.accuweather.com/en/downloads  http://www.accuweather.com/en/free-weather-widgets/current  http://vividventures.biz/examples/frameworks/bootstrap/101/template_d.html# o Government data o NOAA - http://w1.weather.gov/xml/current_obs/ o Commercial Data (free but must register first and then comply with use agreement) o Yahoo - https://developer.yahoo.com/weather/ o Weather.com http://xoap.weather.com/web/xml/guide.pdf

×