Hi guys, this blog is written especially for my TE class. We had a....programming session? Freeformers an app developer company (I think that's what they are lol) came in to our BFP class to teach us how to programme using HTML, CSS and Javascript. They were suppose to teach us how to develop an app for Facebook but I don't see what they taught us towards the end was relevant. But anyways, below is a step-by-step guide of what we did in class and may be useful for this weeks deliverable.
1) Go to Jsbin.com
2) Register on top right hand corner
3) In the HTML section enter content between body tag. E.g. <body> blah blah blah </body>
HTML for content
Tags Classify content
Title
<h1> title </h1>
Subheading
<h2> subheading </h2>
New Paragaph
<p> this is a paragraph </p>
Button- this will appear as a button
<Button> Click me! </button>
Link tag
<a href="http://www.google.com"> link</a>
*Note: The tags/ html codes can be on any line, same line or whatever. Doesn't matter. But space it out to make it neater or / and easier to read.
Image
<img src="ieducase.jpg">
or if its an image on web, right click on the image, select 'copy image location'
<img src="http://www.image.com/hehe.jpg">
Bullet points/ Unnumbered list
<ul>
<li> this is a bullet point </li>
</ul>
Numbered list. e.g. 1, 2, 3,
<ol>
<li> this is numbered list</li>
</ol>
To style your website click CSS on the tab at the top- CSS define how your tags look
1. h1{ <--- this refers to the heading in HTML
2. Color: red; <--- this makes the header red
3. Text-align: center; <---- the aligns the heading to the center
4. font-size: 14px
5. text-decoration: underline;
6.font-weight: bold;
7. font-family: helvetica;
8.}
9. p
10.{color:blue;
11. font family: helvetica;
12. }
To make reference to certain paragraph. go to html and go to a paragraph <p class="paragraphone">
The go to CSS
.paragraphone{font-style: italic;}
Twitter Bootstrap is useful for getting codes
New page
JS BIN on top left hand corner--> New page
How to add Youtube video onto your page
On youtube, click on Share underneath the video--> select Embed--> The html code will appear, copy it--> paste it into your jsbin html page between the body tags.
You can always change the size of the video, by adjusting the width and height in the code.
Top right hand corner untick 'Auto-run JS' for the page to load quicker.
How to add like button for your Facebook page
1. Go to developers.facebook.com
2. search like button
3. scroll down to step 1
4. copy the jsbin address (the url, jsbin.com/yoursite)
5. paste into the URL to like field box. and add latest to the end of the url. e.g. jsbin.com/yoursite/latest
6. make any adjustments
7. click on Get code
8. copy the first bit of code in the box
9. paste it just under the body tag
10. copy the 2nd bit of code and paste it back to html.
11. If you want it to be below the video for example, paste it under the video code
To add a Comment pluggin,
1. go back to facebook developer
2. search for comments pluggin
3. copy the jsbin url
4. paste it the URL comment field box
5. get code
6. Copy the second bit of html code
7
. paste it into the HTML section,
*note* the first bit of the code is to show your connection with Facebook (ideally right under the opening body tag), second bit (short code) of the code is for the pluggin.
You only need to the first bit (long code) of code once for Facebook pluggins. So you may have 3 Facebook pluggins but only need the long code once and 3 different short codes.
add <br/> under the pluggins' code to have a gap between pluggins.
To have something in the center, video for example.
Add <center> before the video code
Add </center> after the code
For more pluggins go to,
addthis.com
For custom fonts, Google fonts.
For a background image, go to CSS
1.body{
2.background-image:
3.url('http://image.com');
4. background size: 2000px 1000px;
5. background-repeat: no-repeat;
6. }
If you see someone else's website and you like certain components of their page and would like to copy it. Right click--> inspect element (firefox)/ view page source (other browser)
How to "STALK" people, LOL!
Go to Facebook personal profile picture
change the url to http://graph.facebook.com/yourpage- basically add "graph" in front of facebook
Copy ID number
paste it on the url after facebook.com, replace your username in the url address.
e.g. http://graph.facebook.com/1234567
to see the picture of that person
add 'picture' after the ID
e.g. http://graph.facebook.com/1234567/picture?type=large
?type=large will make the picture large
Javascript
New Page
Add library-->jquery latest
Click Java script
inside body tag add <div class='facebookPhotos'>
go to freeformers.com/snippets
scroll down for Javascript
In the Javascript;
1. //adding an image
2. $('.facebookPhotos').append('<img src="http://fbfbfbdg'/>"};
3.
// LOOP
for (var i = 1; i <= 100; i++){
// Stuff you want to happen on each loop goes here
} //for
// END LOOP
add the code in 2, after //stuff you want to happen...
How to find personal information
Go to Developers.Facebook.com
Click Tools on the top
Click Graph API explorer
Add the info you want to know about in box on the left.
Click get access code
That's about it I think. There's more next lesson.
.png){kind=avatar}
Guest lecture this week was John Bradford. He is the CEO and Founder of Springboard. "He starts start-up accelerators and loves to help start-ups and their founders achieve their true potential. Over the last 2 years, Jon has helped to start 12 multi-company accelerators from Montreal to Moscow. "- Springboard.com
