`

Toro

nto

Publ

ic L

ibra

ry

Digital Design Studio Basics: Website Design II

Participant’s Package

January 2013

w w w . t o r o n t o p u b l i c l i b r a r y . c a

h t t p : / / v r l . t o r o n t o p u b l i c l i b r a r y . c a

Original work by Toronto Public Library. The support of the Government of Ontario through the Ministry of Citizenship, Culture

and Recreation and of the Government of Canada through Industry Canada is

Page 2

Digital Design Studio Basics: Photoshop II

Outline I Adding Social Media directly on your Website

• Adding Twitter Feeds / Embedding a Single Tweet • Creating a new Twitter Widget • Creating and Adding a Facebook Badge • Facebook Video and Plugins

II Posting a Google Map on your Website

• Search Location • Embed the Code into the HTML

III Photo Gallery Creating and Titling

• Creating Thumbnails and Larger Images • Modifying the HTML with Titles

IV Embedding YouTube/Online Videos

• Changing the YouTube Video Window's Look and Features • Adding a YouTube Video to Social Network Pages, Blogs, Etc. • Creating Your Own Video Player

V Inserting Audio

• Using the HTML5 <audio> Element • Embedding From SoundCloud

VI PayPal

• Creating a PayPal Account • Creating a PayPal Button for your Website

VII Disabling Right Click on Your Website • How the tool works • How to adjust it

IX Glossary and Links • Glossary • Links and Resources

Note: A large portion of this handout deals with a major amount of HTML and other source codes. That source code has been made available on the Digital Design Studio Blog to use. Thanks.

Page 3

I. Adding Social Media directly on your Website Adding Twitter Feeds

You don't have to know HTML to add a Twitter feed to your blog or website. Twitter's Resources page generates the code for you, even allowing you to customize the size and colors of the widget, and gives you a snippet of code to insert in a blog sidebar or static HTML page. These widgets work with any website hosting provider, although they're specially optimized for the Blogger service. Creating a new Twitter Widget Instructions

To create a new widget to embed into your module, website or web page follow these steps.

1. Log into your Twitter account..

2. Look for the ‘Cog’ icon in the upper right of the Twitter screen, click it and select the Settings..

3. In the left hand menu panel click on the Widgets option.

4. Choose to ether Create Widget or Edit an existing widget..

5. Choose which type of widget you want (User Timeline is the common option).

6. Customise you widget (Theme, link colour). .

Page 4

7. You will need to enter each web address (comma separated) that you want to embed your widget into in the Domains text field..

8. When finished click Create widget to generate your embed code..

9. Copy your embed code.

10. Paste this embed code directly into the HTML of the site/module/page.

. Note: The actual code the Twiiter Widget creates will only work on a uploaded website, so to ensure it works, be sure to upload the website to a remote server to check.

<a class="twitter-timeline" href="https://twitter.com/gregzky17" data-widget-id="286951699552276481">Tweets by @gregzky17</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Page 5

Embedding a Single Tweet Tweets have become one of the most important — and simplest — ways for people to share news, humor, inspiration, and knowledge online. And they are even richer when they include pictures, videos, locations, or links to other sites on the web. With the new version of Twitter, anyone can embed Tweets simply by copying and pasting one line of code into their website. Embedded Tweets automatically open to show images, conversations and videos. To embed a Tweet on your website or blog:

1. Click Embed this Tweet, located at the bottom of any Tweet permalink page.

2. Select HTML, Shortcode, or Link from the pop-up dialog box.

3. Copy and paste the code provided in the dialog box into your blog or website.

<blockquote class="twitter-tweet"><p>First time in a long time the <a href="https://twitter.com/search/%23Leafs">#Leafs</a> are still in contention in January.<a href="https://twitter.com/search/%23idlenomore">#idlenomore</a></p>&mdash; Gregory Astill (@gregzky17) <a href="https://twitter.com/gregzky17/status/288273503076106240" data-datetime="2013-01-07T13:18:53+00:00">January 7, 2013</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Page 6

Adding a Facebook Badge Facebook has a nice little feature called Badges. Badges make it easy for you to show off your Facebook profile, as well as your latest status updates, on your website. Create a Facebook badge

Visit the Facebook Profile Badges page, and select the information you would like to display on your badge by clicking Edit this badge and Save.

Next, click Other to get your badge HTML code:

Copy the HTML code and paste it into source code of the webpage.

<!-- Facebook Badge START --><a href="https://www.facebook.com/gregory.astill" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Gregory Astill">Gregory Astill</a><br/><a href="https://www.facebook.com/gregory.astill" target="_TOP" title="Gregory Astill"><img src="https://badge.facebook.com/badge/610160820.7095.1118885074.png" style="border: 0px;" /></a><br/><a href="https://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><!-- Facebook Badge END -->

Types of Facebook Badges

Page 7

Adding a Facebook Video

Anyone can upload video clips to the Facebook site but unlike YouTube and other online video sharing sites, Facebook doesn’t (officially) provide an embed code for their videos. That’s a problem for two reasons, but easily solvable. Also you can share videos with friends who aren’t on Facebook?

Here’s a simple trick that will let you embed any Facebook video into your web pages.

Every video uploaded on to Facebook has a unique ID that you can find in the browser’s address bar (look for the value of parameter "v"). Copy that number and replace it with xxx in the code below. <object width="400" height="224" > <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="http://www.facebook.com/v/xxx" /> <embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224"> </embed> </object>

Now you can put that code on any web pages and the Facebook video will play just like any other Flash video. Unfortunately, since Facebook videos are embedded using Flash, you can’t enjoy them on an iPad.

Other Facebook Plugins

Facebook has a grand vision: to connect the entire Internet, and every website on it, with a layer of social integration. Now, with over 10 social plugins available to the public (and free of charge!), website owners need to decide how best to utilize the available tools for their businesses.

Some important stats from SearchEngineLand:

• The average media site integrated with Facebook has seen a 300% increase in referral traffic.

• Users coming to NHL.com from Facebook spend 85% more time, read 90% more articles and watch 85% more videos than a non-connected user.

The research to date has pointed to the fact that Facebook integration helps drive traffic to websites and pages, as users interact with sites and increase the branding or exposure of the content.

To decide which plugins are right for your website, check out the description of some of the more important plugins below

Page 8

#1: Like Button

The Like button lets users share pages from your site back to their Facebook profile with one click. When the user clicks the Like button on your site, a story appears in the user’s friends’ news feed with a link back to your website.

The Facebook Like button is a great way to direct traffic to specific items on your site that otherwise would not have gotten the fanfare.

This is a great way to direct traffic to specific items on your site that otherwise would not have gotten the attention.

#2: Send Button

The Send button allows your users to easily send your content to their friends. It’s different from the Like button in that the content sent between friends is communicated via a Facebook message and not, by default, through a public news feed posting as a “Liked” item would be. This button is great for content that might be better served individually.

The Send button is great for content that might be better served individually.

#3: Comments

The Comments plugin lets users comment on any piece of content on your site. This plugin is especially handy for sites that are not built on top of a content management system (CMS) that already has comment threads built in.

Page 9

#4: Activity Feed

The Activity Feed plugin allows you to show users what their friends are doing on your site through Likes and Comments. This is basically a listing of the most recent activity people have undertaken on your website (provided, of course, which these people also happen to be Facebook friends with the visiting user looking at the feed).

The Activity Feed plugin shows users what their friends are doing on your site through Likes and Comments.

#5: Recommendations

The Recommendations plugin lets you give users personalized suggestions for pages on your site they might like. These “personalized” recommendations are compiled automatically by the plugin, using information from the most common activity on your site.

The Facebook Recommendations plugin gives users personalized suggestions for pages on your site they might like.

#6: Like Box

The Like box enables users to Like your Facebookpage and view its stream directly from your website. You can toggle the stream of your Facebook page on or off with this plugin as well, so you have the option of showing a more detailed look into the types of content users can expect to see from your page when they commit to becoming a fan by clicking “Like.”

The Facebook "Like" box enables users to Like your Facebook page and view its stream directly from your website.

Page 10

II. Posting A Google Map On Your Website

1. Search for a location on maps.google.com

2. Specify the map type you want Select a view type in the top right corner of the map. Click "More" drop-down menu for more map type options.

3. Adjust map to desired center and zoom level

4. Click on "Link"

Copy and paste to an HTML Page to display map

5. You are done!

The Map appears right where you placed the HTML

Uses of a map on your website

o Show customers a map of your company location

o Let the world know where your band's next gig is

o Inform friends of your new address in your blog

For use on freely available and public facing websites, no further permission is required from Google. Learn more at Google Permissions

Page 11

III. Photo Gallery Creating and Titling

To create a proper photo gallery, it’s always common to have the following information:

Thumbnails for every photo Larger Versions of the same photos for close-up viewing Properly Title and Describe each image accordingly Separate Page to host each larger version of the image

In some cases, that last item is an annoying extra step you can try and avoid. A lot of newer designed sites are taking customer to one singular page, where a customer clicks on any of the available thumbnails and the enlarged image appears on top in a transparent window. To get back to the set of thumbnails, all the customer has to do is click on the “Close” button or click off of the picture and the window disappears.

The following source code displays what is happening in more detail.

The “a href” refers to the file name and location of the full version of the image when the thumbnail is clicked on. The “img src” refers to the location and file name of the thumbnail being displayed at the moment. The “title” refers to the name you want to give the photograph that will appear in the window whrn it is clicked on directly below.

Page 12

IV. Embedding Youtube/Online Videos

When you click the Share button, the HTML code used to embed a link that video is displayed directly below it, however that's not what we are after--we want to directly embed the video into the page. We do that by clicking the Embed button which is displayed directly below the Link URL, as shown below.

Once you click the Embed button, you will see the HTML code for embedding the video, as shown below.

Page 13

By clicking your mouse within the new embed code (in the form field), all the text in that field is highlighted. You then right mouse click in that field, and select Copy from your browser's drop down that will appear when you right click in the field, as shown here:

Here's what the embed code looks like for the video above:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/W-Q7RMpINVo" frameborder="0" allowFullScreen></iframe>

Lastly, copy and paste the source code into the HTML on the page you want to display it.

Changing the YouTube Video Window's Look and Features

Not only have the fine folks at YouTube seen fit to allow web developers, bloggers, and even normal people to embed videos directly into their own websites, they've made some options available so you can customize how the video window looks and behaves.

This enables you to include related videos (like you often see when you watch videos yourself), use HTTPS--a more secure protocol, or enable YouTube's privacy enhanced mode, which allows users to view the video without storing any information in cookies related to the videos the user has viewed. You can also choose to use the "old style" embed code if you wish.

The other nice feature they provide, located even further below the embed code on the video page, is the ability to select the size you want the video window to use. YouTube allows you to choose from four sizes, plus a custom size, as shown below:

When you select a size by clicking the radio link button for a particular size, the HTML code in the Embed box is updated so you can copy and paste it into your web page.

Page 14

Adding a YouTube Video to Social Network Pages, Blogs, Etc.

Some of you may be more interested in adding videos from YouTube to your social networking profile pages or walls, blogs or other pages. YouTube makes that even easier than adding videos manually as shown above. You just follow the same procedure you previously followed and click the Share button like before. If you're hoping to add the video to a Facebook, Twitter or Google+ account, you simply click on the social networking site's icon:

When you do that, a window will open up which will allow you to grant permission to access your social networking account, and it will allow you to add a comment and select the people or lists that will be allowed to view it. If you wish to add it to others, YouTube is equipped to allow you to add it to the following sites:

• orkut

• tumblr

• Blogger

• MySpace

• hi5

• Bebo

• StumbleUpon

To access the social networking buttons for these sites, click on the Show More link next to the social networking icons shown above, and you will be presented with the following:

The process is the same as it was for adding a video to Facebook--just click the icon, login and allow access to your social networking account, and submit it. It will be added to your wall, profile or blog just like that--it really can't get any easier.

Page 15

Creating Your Own Video Player

Instead of relying on other sites to host your videos, now you can be in full control. Services and tools like JW Player allow anyone to create their own library and playlist.

Given the Flash versus HTML5 debate, it's natural to think you need to choose one or the other. You don't. JW Player 6 is everything you love about HTML5 and Flash rolled into one incredible player. JW Player 6 automatically selects the best playback for your viewer's device and browser, so you deliver unparalleled video experience on iPhone, iPad, Android, and the Desktop.

The JW Embedder

Since the JW Player is now more than a simple Flash component, it requires the use of a special JavaScript library called the JW Embedder to take advantage of all of the features the JW Player supports. These features include HTML5 support (including support for Apple iOS devices), and the player's JavaScript API

Just like SWFObject, the JW Embedder allows you to set up your player using valid XHTML and will select the appropriate embed method for each user's browser, including mobile devices that don't support Flash, such as the iPhone and iPad. The JW Embedder Reference Guide explains how to use the JW Embedder in more detail, but in general, your embed code will look something like this:

Page 16

V. Inserting Audio

Inserting audio into your website has never been easy. If it’s your own music, a podcast, making it available for download is a pretty straight forward.

Using the HTML5 <audio> Element

The HTML5 <audio> tag defines sound, such as music or other audio streams.

The <audio> element works in all modern browsers.

The following example uses the <audio> tag, and specifies one MP3 file (for Internet Explorer, Chrome, and Safari), and one OGG file (for Firefox and Opera). If anything fails it displays a text:

Example <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio> Problems:

• You must convert the audio files into different formats

• The <audio> element does not work in older browsers

Embedding From Soundcloud

Just like posting a video from YouTube or a Tweet from your Twitter feed, SoundCloud is making it easier to post music. Upload your music to your account for free and start sharing. You can easily add files from your SoundCloud account on other websites and making sharing & receiving music easier. You first have to create a Widget that you can embed on your website, blog, myspace or just about anywhere on the web.

Page 17

VI. PayPal

Creating a PayPal Account

Now learn how to create a PayPal business account in nine easy steps

PayPal is literally the easiest and fastest way you can start accepting payments on your website. Creating PayPal accounts is free, and only takes a couple of minutes.

Once you create the account, you will be able to accept payments right away; however, you will have to verify your account to be able to accept larger payments.

Interestingly, creating a PayPal account is free. To establish a PayPal Business account, you need to follow these steps:

1. Go to the homepage of the official website of PayPal and click on the “Sign Up Today”. This page will lead you to sign up for a PayPal account.

2. For creating a PayPal business account, enter you country of residence, click on the “Get Started” button located beneath the “Business” heading. A page will appear saying “Account Sign Up” and “Business Account”.

3. Follow the instructions provided by the page with the registration form and create your account with PayPal. Once you have filled out the registration form and clicked the “continue” button, you will receive an e-mail with a confirmation link which will return you to the PayPal website to confirm your email address.

4. Now click on the confirmation link in the message sent by email from PayPal. A PayPal page will appear to specify the password.

5. Enter your password (you created during the registration process) in password box and click the confirmation button. This will take you to PayPal site “My Account” section.

6. Now you need to click on the Seller Tools section located on the top of the “My Account” section. If you want to create a PayPal shopping cart, click the link in PayPal shopping cart. To do this, you need to click the “Buy Now” button.

Page 18

7. Now provide information on the product you are selling: Enter a brief description of your product sales in the “Name of Product/Service” section; enter a product number in the “Product ID/Number” section, enter the price in the “Price Product/Service” box, and choose a button that buyers can click to make a purchase (you can choose either a button containing the PayPal logo as a button you have created above).

8. When you have filled in all the above information in PayPal website, click on the “Create Button Now”. This will take you to the PayPal website to accept.

9. Finally, copy the code in the box “for web pages” and paste it into the web page containing your product sales.

The advantages of using PayPal for business is that you can accept payments through your website without having to create an online seller account. Due to online payment frauds, what is most important is that you and your client have a high level of confidence to manage money without the use of credit card preventing you and your clients from online use of credit card or debit card directly and for this creating a PayPal business account is the best option for selling products online. Adding a PayPal button to your website will give your website an edge over your business competitors.

Creating a PayPal Button on Your Website

If you're selling something on your Web site and accepting payment through PayPal, you can easily add a PayPal button to your site. First, log on to the PayPal Web site and then follow these steps to create a good-looking, automatic payment button:

1. Click the Merchant Services tab, at the top of the page.

Page 19

2. Click the Buy Now Button link.

3. Indicate the type of item you want to Accept payments for. Your choices are

o Products: If you're selling physical merchandise.

o Services: If your customer is buying a psychic reading, bookkeeping, or some other service from you.

o Subscription and recurring billing: If you’re selling subscriptions to a newsletter or collecting dues for a membership.

o Donations: If you have a Web site and you’d like to get donations.

o Gift Certificates: If you’re selling gift certificates to your store.

4. Decide what kind of button you want. For this, you have two choices

o Add to Cart: If you’re selling lots of items and you’d like to encourage your buyers to make multiple purchases.

o Buy Now: When your customers will pick only one item from a number of choices.

5. Enter your item information.

Here’s a list of all the items you’re asked to enter in the Create Buy Now Button section. Some of this information is optional:

o Item name/service: Input your item (or service) name.

o Item ID/number: Give your item an ID number or name.

o Price: Enter the item price here.

Page 20

o Currency: Decide what currency you’re willing to accept for your purchases.

o Buyer’s Default Country: If you accept international orders, specify here whether you want your buyer’s payment page to default to a specific country. If you don’t specify, buyers can choose for themselves.

o Weight: Weight of the packaged item when it’s ready to mail.

6. Select a button in the Customize Button section.

Choose a Buy Now button to insert on your page. If you don’t like the ones pictured, click the Customize Appearance link to see more options.

7. Continue to scroll down the page and make choices or fill in information as prompted.

You see the following prompts and options:

o Button Encryption: Decide whether you want your button to be encrypted.

o Shipping Method Option: From this area, select a flat shipping and handling charge or one based on a percentage of the item’s price.

o Sales Tax Options: Select your state and enter the appropriate sales tax to be applied to your in-state purchases. If you already have a sales-tax provision in your PayPal profile, it will be listed here automatically. PayPal will apply the sales tax for sales shipped within your state.

8. After you make your selections and choose a button to insert, click Create Button Now.

9. If you want to add options, click Add More Options.

On the next page, you can add extended options for your button. Included (definitely use these!) are the following:

Page 21

o Item options: If your item has options (such as different sizes or colors), you can create a custom drop-down list for your payment page so the customer can choose; just type the offered options in this box.

o Insert your logo: To add a logo to your payment page, type the URL where the file is stored. PayPal will place the logo on your payment page.

o Payment landing page: If you want your customers to land on a specific page after they’ve made a payment — setting up a thank-you page on your Web site is a nice idea, for example — enter that URL here.

o Cancel Transaction page: If you want to include a page where people are taken if they cancel the transaction before completing it, you can insert that address here. If you don’t specify a page, they will land at a PayPal Web page that allows cancellation of the transaction.

o Quantity: If you’d like your customers to be able to purchase more than one of your items at a time, you may indicate that here. The buyers will then be able to fill in a number in a quantity field.

o Shipping address: Click Yes if you’d like the customer’s shipping address.

o Optional instructions: If you’d like your buyers to be able to write you a note, click Yes in this field.

10. Click Preview.

You see a sample of the page your customer will see after making a Web payment to you.

11. If the page is okay, click the Create Button Now button.

12. If you want to go back and edit, click the Edit button.

That’s all there is to creating your first Buy Now button and the payment page that appears when it’s clicked.

Page 22

VII. Disabling Right Click on Your Website

I’m not a fan of this operation, but I do see the reasoning behind why I get asked it all the time. Photographers and artists seem to ask more and more, because it’s their lively hood at stake. There are so many ways to download images from a website, but the most popular is for the user to right click on the image and choose Save Image As.

It’s not just for images/graphics; you can also prevent someone from taking some of your code from your website. You can help encrypt and protect all aspects of your website with the following HTML codes. No right click block is 100% effective, but it will help against novices.

<SCRIPT TYPE="text/javascript"> <!-- //Disable right click script //visit http://www.rainbow.arch.scriptmania.com/scripts/ var message="Sorry, right-click has been disabled"; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") // --> </SCRIPT>

Use the script below so when someone right clicks to save an image off your page they will be blocked. It can either be blocked with by doing nothing or you can have a message appear letting the user know that the function was disabled. You can also personalize the message if you’re up for it.

Page 23

IX. Glossary and Links

Glossary Element: What most know as a "tag" WHATWG and W3C call an "element". I have adopted the common practice of using them interchangeably when in fact I probably shouldn't. Actually an "element" has opening and closing "tags". For example the p "element" has an opening "tag": <p> and a closing "tag": </p>. Embedding: An object created with one application and embedded into a document created by another application. Embedding the object, rather than simply inserting or pasting it, ensures that the object retains its original format. HTML5: is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard Hyperlink or Link: A clickable navigation element on a webpage. The most common destination anchor is a URL used in the World Wide Web. PHP: PHP is a general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages. Source Code: To view a page's source code in IE on a PC click "View" and then "Source" and the code should open in a new window. Select it all, copy it and paste it into Notepad or some text editor. In Firefox click "View" and then "Page Source" and it should open in a new window. If you have any problems or are in a different browser search "source code" in help. Style Sheet: Web style sheets are a form of separation of presentation and content for web design in which the markup (i.e., HTML or XHTML) of a webpage contains the page's semantic content and structure, but does not define its visual layout (style).

Links and Resources

http://www.labnol.org/internet/how-to-embed-in-html-webpages/6365/ http://web.appstorm.net/roundups/social-media-roundups/15-simple-ways-to-integrate-facebook-into-your-website/ http://www.w3schools.com/tags/default.asp http://html5doctor.com/the-dl-element/ http://codex.wordpress.org/Glossary http://www.thesitewizard.com/ http://www.thesitewizard.com/wizards/feedbackform.shtml