html 5 and css 3, illustrated complete and css… · really simple syndication format for document...
TRANSCRIPT
HTML 5 and CSS 3, Illustrated Complete
Unit M:
Integrating Social Media Tools
Objectives
Understand social networking
Integrate a Facebook account with a
Web site
Integrate a Twitter account feed
Add a Twitter hash tag feed
Participate in social bookmarking
HTML 5 and CSS 3 – Illustrated Complete 2
Objectives (continued)
Create a blog
Embed a YouTube video
Link to an RSS feed
HTML 5 and CSS 3 – Illustrated Complete 3
Understanding Social Media
Social networking site: Web site that
enables people to share information
about common interests, news, and
events
Also known as social networks
Open to most anyone with restricted
access to unknown users
Prewritten HTML or JavaScript code
HTML 5 and CSS 3 – Illustrated Complete 4
Understanding Social Media
(continued)
Blog: special-purpose Web site that
enables one person or a small number
of people to post news or updates
Usually focused on a narrow topic
Microblog: site that shares aspects
with both social networking sites and
blogs
Twitter is an example
HTML 5 and CSS 3 – Illustrated Complete 5
Understanding Social Media
(continued)
Video hosting sites
Enable users to create videos and
distribute them widely
YouTube is a prime example
Visually powerful way to connect with an
audience
HTML 5 and CSS 3 – Illustrated Complete 6
Understanding Social Media
(continued)
Common features on many social
networking sites
HTML 5 and CSS 3 – Illustrated Complete 7
Integrating a Facebook
Account with a Web Site
Opportunity to let people know about
social media presence and invite them
to become part of network
Enables you to integrate into own Web
site in unique ways
Use provided widgets
Quick, effective way to create bridge to
social network
HTML 5 and CSS 3 – Illustrated Complete 8
Integrating a Facebook Account
with a Web Site (continued)
Inline frame: acts as self-contained
web page within the HTML document
Feed: most recent set of updates
created by the organization
Social networking sites have more user
updates that static Web pages
Widget showing feed can be useful Web
site addition
HTML 5 and CSS 3 – Illustrated Complete 9
Integrating a Facebook Account
with a Web Site (continued)
HTML for Web page containing widget
code
HTML 5 and CSS 3 – Illustrated Complete 10
Integrating a Twitter Account
Feed
Way to communicate about specials or
provide coupon codes
Use site to listen to what people are
saying about them
Enables quick responses to customers’
concerns
Tweets: name for Twitter postings
HTML 5 and CSS 3 – Illustrated Complete 11
Integrating a Twitter Account
Feed (continued)
Web page incorporating Twitter user
feed
HTML 5 and CSS 3 – Illustrated Complete 12
Adding a Twitter Hash Tag
Feed
HTML 5 and CSS 3 – Illustrated Complete 13
Hash tags: (#) searchable codes that
allow users to find postings on a given
topic
Type in Search Query, Title, and
Caption boxes and click Test settings
button
Web page displays a preview of widget
Explore available settings
Adding a Twitter Hash Tag Feed
(continued)
HTML 5 and CSS 3 – Illustrated Complete 14
Replacement code uses same script
from Twitter to search for and display
recent updates based on #minnesota
hash tag
Participating in Social
Bookmarking
HTML 5 and CSS 3 – Illustrated Complete 15
Social bookmarking: making
connections through social networking
sites
Add social media widgets to Web sites
Insert button onto Web Site users can
click to join network on social networking
site
Facebook and Twitter both have these
options
Participating in Social
Bookmarking (continued)
HTML 5 and CSS 3 – Illustrated Complete 16
Social bookmarking icons added to
Web page
Creating a Blog
HTML 5 and CSS 3 – Illustrated Complete 17
Built and edited using dedicated
blogging platform
WordPress is a popular platform
Simplify content creation
Enable users to use templates to apply
uniform style to blog parts
Useful for easily including content that
changes rapidly
Creating a Blog (continued)
HTML 5 and CSS 3 – Illustrated Complete 18
WordPress Dashboard
Embedding a YouTube Video
HTML 5 and CSS 3 – Illustrated Complete 19
Make user-generated video available
to anyone with Internet access
Important complement to social
networking sites
Can be incorporated into status updates
Businesses or organizations can share
links and invite interested customers
or clients to spread news
Embedding a YouTube Video
(continued)
HTML 5 and CSS 3 – Illustrated Complete 20
Blog containing a YouTube video
Linking to an RSS Feed
HTML 5 and CSS 3 – Illustrated Complete 21
News aggregator: feed reader that lets
you bookmark blogs and view latest
headlines and content in single place
RSS: short for Rich Site Summary or
Really Simple Syndication
Format for document that contains feed
information for a Web site
Copy links from Blog platforms that
generate and update RSS documents
automatically
Linking to an RSS Feed
(continued)
HTML 5 and CSS 3 – Illustrated Complete 22
RSS Syndication code added to Web
page
Summary
You can integrate a Web Site with
different aspects of social networking
Facebook, Twitter, blogs, YouTube
videos, RSS feeds
Social networking sites enable people to
share information about common
interests
Blogs and microblogs enable people
to post news or updates on various
topics HTML 5 and CSS 3 – Illustrated Complete 23
Summary (continued)
Inline frames act as self-contained
page
Hash tags are searchable codes that
allow users to find topic postings
Social bookmarking is important way
to make connections through social
networking sites
News aggregators let you bookmark
blogs to view content in single place
HTML 5 and CSS 3 – Illustrated Complete 24