Sometimes it's useful to pull in data from many different sites into your own.
Search for phrases like: API (application programming interface), widget or plug-in
Just like with javascript galleries, follow directions for implementation and style.
Control your content by using Divs! (don't forget that)
Twitter API / Widget
- Try this IF YOU HAVE A TWITTER ACCOUNT (their site won't let you access any of the widget info without it.
- create a new html page: twitter.html
- copy the body rule into the internal style for the page (or create your own)
- goto the Twitter API Widget page
- OR directly to the option for Profile
- use the profile name: swc_arts
- style to your taste
- insert code into your html page (do not forget to use Divs)
- See it in action
- If you do not have a Twitter account, embed this code into a defined Div for your Twitter feed.
Flickr API / Plug-in
- We are going to use Galleria (I've tested v.1.2.5 and it works)
- Download the full package (v.1.2.9)
- It comes with a "classic" theme (the others on its site cost $)
- You can use any Flickr set you want or this one: set:72157624918916898
- Create a new html page: flickr.html
- copy the body rule into the internal style for the page (or create your own)
- Use my instructions to implement (many options here can be customized)
- See it in action
Google Maps API <iFrame>
- Create a new html page: map.html
- copy the body rule into the internal style for the page (or create your own)
- create a map to SWC:
- 900 Otay Lakes Road, Chula Vista, CA 91910
- instructions for embeding on your website
- add to a browser // link icon, "customize and preview"
- A full list of options for Google Map APIs (for developers)
Google Web Fonts
- Following this link and add a linked Google Web Font to your 3 pages.
- Choose a font, click on the "quick-use" icon, scroll down the page for code.
- You can add it in the head section of your page and create a CSS .class
- I suggest naming the .class googlefont, or the name of the font.
- Use only a few fonts on a web page.
- Use only 1 google web font for this assignment.
Turn Work into Dropbox
folder: lastname-api