don't reinvent the wheel: leverage existing web...

38
Don't Reinvent the Wheel: Leverage Existing Web Services Jess Stratton, lynda.com at LinkedIn

Upload: others

Post on 23-Aug-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Don't Reinvent the Wheel: Leverage Existing Web ServicesJess Stratton, lynda.com at LinkedIn

Page 2: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Who am I and why are we here??

Jess Stratton• Twitter: @NerdGirlJess• Linkedin.com/in/JessStratton• [email protected]

Developer• Wordpress customizations• Database programming• Website building and administration

Technology Coach• Owned training facility• Lynda.com author:• http://www.lynda.com/Jess-Stratton/1250817-1.html

Writer/Blogger• Industry articles• Lifehacker contributing author• Textbooks

Page 3: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Don’t reinvent the wheel!Many of these projects use LITTLE to NO code. Many of your customers are using these apps and services already.

You’ll have new solutions to present to your customers.

Your job is WAY easier!

You can use this stuff in your

personal AND professional life!

Page 4: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

GeochartsTwitter Google  Docs

Google  Maps IFTTT  Maker Fonts

Page 5: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

This is HANDS ON!

Building blocks

Start  with  a  blank  webpage

Follow  along

Page 6: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Twitter Widgets

Page 7: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

PROJECT:Embed a Twitter feed

onto a website

Difficulty: 1 star

Skills required: None.

Prerequisites: Available Twitter feed

Time required: Quick

Link: twitter.com

Page 8: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 9: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

You CAN do more with CSS, javascript, and the API

https://dev.twitter.com/web/embedded-timelines

Curate a list of static tweets for easy display on a website with CURATOR!

https://curator.twitter.com

Page 10: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 11: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

PROJECT:Add Google fonts to

a website

Difficulty: 1 star

Skills required: None.

Prerequisites: None

Time required: Quick

Link: www.google.com/fonts

Page 12: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 13: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Add the code you are given to your page:

Page 14: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 15: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 16: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Make it responsive!

Page 17: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

You’re kind of stuck with that blue border, though.

Or are you??

Page 18: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

https://github.com/MilanKacurak/FormatGoogleCalendar

He  has  made  excellent  javascriptcode  available  on  GitHub!https://www.kacurak.com/blog/turn-­‐google-­‐calendar-­‐into-­‐events-­‐list-­‐on-­‐website

Page 19: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Make calendar public, and get address:

Page 20: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

You need a Google API key at the Google Developers Console

Page 21: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 22: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

PROJECT:Add Google Docs to

a website

Difficulty: 1 star

Skills required: None.

Prerequisites: Google account

Time required: Quick

Link: https://drive.google.com

Page 23: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Create  your  document  and  publish  it  to  the  

web

Page 24: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Website will update automatically when

changes are made to the document!

Page 25: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 26: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

PROJECT:Add a chart to a

website

Difficulty: 1 star

Skills required: None.

Prerequisites: Google account

Time required: Quick

Link: https://sheets.google.com

Page 27: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Gauge charts• Fund raising• Project planning• Use IFTTT to append rows

Geomap charts• Regional heatmaps• Contains global maps to choose from• Use IFTTT to append rows

Page 28: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 29: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Create your own forms and charts!

Google Forms to input data live online from your

customers

Google Sheets creates embeddable charts from

that data

Websites that create themselves!

Self maintaining sites

Embed a form to your existing site

Use IFTTT to chart ANYTHING!

Page 30: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Create a Google Form

Create a chart from the results

Page 31: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps
Page 32: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

IFTTT  Maker

Page 33: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

PROJECT:Create a reminder

from a web form

Difficulty: 3 stars

Skills required: HTTP POST/forms

Prerequisites: Maker Channel connect

Time required: 10 minutes

Link: https://ifttt.com/maker

Page 34: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

IFTTT – If This, Then That!

Page 35: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

IFTTT Maker Channel

All it does is wait for a web request POST trigger!

Link this with your Google Calendar, iOS Calendar…

ANY  calendar  that  has  a  channel  with  IFTTT!

Page 36: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Google  My  Maps

Page 37: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

PROJECT:Create a custom

map from a Google Sheet

Difficulty: 1 stars

Skills required: None

Prerequisites: Sheet with place data

Time required: 10 minutes

Link: https://www.google.com/maps/d/u/0/

Page 38: Don't Reinvent the Wheel: Leverage Existing Web Servicessolacelearning.com/wp-content/uploads/Presentation.pdf · • Use IFTTT to append rows Geomap charts • Regional heatmaps

Customize  icons,  colors,  more!

Use  a  Google  Form  to  collect  place  data!