Web Teacher

3 Tips for Educators Who Don’t Know Jack about Twitter

Do you keep getting the advice that you should be using Twitter? And do you keep ignoring it?

Twitter can be daunting for someone who doesn’t feel really on top of the whole social media thing. It’s overwhelming if you look at all of one piece. But you can separate out small pieces of Twitter that you may find useful and helpful.

I want to help you find the way to separate out the pieces, put them in usable containers, and let the rest flow on by without worrying about it. What follows are several ways you can narrow down the Twitter stream and make it manageable.

Who You Follow and the @ Symbol

Even the most inexperienced Twitter user knows that you follow people and people follow you. You want to be selective about who you follow. Follow people whose tweets you truly want to read. You do not have to follow everyone who follows you.

When you sign in and open Twitter in your browser (or in some app like TweetDeck), you see messages sent by the people you follow. Depending on how many people you follow, you may see only a few tweets, or they may roll by fairly quickly.

You also see tweets that were retweeted by people you follow. I’ve highlighted examples in the image.

Retweets do spread your message around to more people, so they are considered a good thing to be appreciated.

Looking at the example tweets in the image above, you notice that a tweet can include the name of another Twitter user – for example @ESPN – or a link to an article or web site. Tweets can also include hashtags with keywords – for example #GameDay.

Using the @ symbol indicates a Twitter user. You can address your message to a specific person this way. You can click the person’s name and go to their profile to learn more about them and follow them if you want. Or you can just mention someone in passing using the @twittername knowing that they will see your tweet.

Using Hashtags and Searching

Hashtags followed by keywords are useful for following a topic rather than a person. Often events or causes have special hashtags. I recently attended WordCamp in Albuquerque. The hashtag for the event was #wcabq. Because everyone at the event knew about the hashtag, they used it when they tweeted about the event. That made it very easy to search on #wcabq and see all the tweets about the event in one place.

Hashtags can help your tweet get seen and retweeted. Recently I wrote a post on this blog about accessibility. I tweeted it, but I didn’t include a hashtag. Later I realized I’d overlooked the hashtag for accessibility (#a11y – which is an a, 11 missing letters, and a y). I tweeted the same link again with a hashtag. I got more traffic to my post and I got retweets the second time. There are people and businesses who maintain a constant search for whatever hashtag they are interested in so they see and perhaps respond to every tweet on a particular topic. One of the most common uses of Twitter is to search for some bit of breaking news using a hashtag.

In a classroom, a hashtag can be used to follow tweets on a particular topic of discussion during the class period.

Using Lists

It’s easy to create a list. Sign in to Twitter in your browser. You should see something like this in your sidebar.

Using the Lists link you can do two things. You can create a list. You can also see other people’s lists that you are on. You can click on one of your lists (after you’ve made some) and see only tweets from the people on that list.

You can add someone to a list whether you follow them or not. When you are looking at a person’s profile, you see a pull down menu next to the Follow/Following button. Use it to select either add to or remove from list and pick the list you want that person on. You can put a person on more than one list.

Some people use lists to separate out the people they are really interested in and seldom look at tweets from everyone they follow, they just look at their special list.

I use lists to aggregate tweets I don’t want to miss into a daily paper using paper.li. For example, I have paper.li pick up all the tweets from my list of the women in web education and create a daily paper for that list. Once a day I get an email that the paper is ready, and I can get 24 hours worth of tweets from the educators on that list in just a few minutes. This is a big time saver for me; I never miss a tweet from a people I really am interested in. Other people who are interested in web education can follow my list. Anyone can subscribe to and read the daily paper.

These three tips – finding the right people to follow, using hashtags to find what you want, and using lists to narrow down what you read – can take Twitter from an overwhelming rush of chatter to something you are in control of and can use to achieve your particular goals.

New Page on the Blog for Curated News

I added a new page on the blog called Curated. It was mostly a way to get some slow loading widgets out of the sidebar and push them off to a separate page. The main page should load a little faster.

The three items I put on the new Curated page:

The Women in Tech slideshow from the Flickr group I administer
a badge and slideshow for the HTML5 News from scoop.it which I constantly updated with new articles pertaining to HTML5
the Women in Web Education Daily from paper.li which shows tweeted links and articles from women in web education

They were nice to have in the sidebar in case you might take note of something interesting in one of the widgets while reading a blog post. I’m hoping this will fulfill a goal for a slight increase in loading speed, and that you won’t forget to take a gander at the Curated page now and then to see what’s new.

The Proposed Picture Element in HTML

New at the W3C is a proposal to create a way to work responsive images. The proposal, called HTML Responsive Images Extension, suggests a new HTML element called <picture>. The editors of the document are Mat Marquisa member of the Responsive Images Community Group and Adrian Bateman from Microsoft Corporation.

The document is a draft, which means many things may change before these suggestions become a recommendation at the W3C.

The reasons and goals for the proposed element are spelled out:

Respond to different screen pixel width/height
Respond to different screen pixel densities
Respond to user zoom on image resource.
Provide user agents with information they need to select the most appropriate image source given low bandwidth situations
Will fallback gracefully on older user agents
Can be polyfilled effectively
Retains, at a minimum, the same level of accessibility as current img element
Preserves separation of content markup and styling
Provides a purely client-side solution which can include JavaScript, but doesn’t require it
Supports use cases where authors need to explicitly define different image versions as opposed to simply different resolutions of the same image
Provides a consistent and predictable pattern for delivering alternate media sources based on client context
Supports succinct but understandable mark-up

A lofty list of goals, all necessary and important. Responsive design gurus have struggled for some time with how to deal with images in a responsive site. The list of goals reflects that discussion and those needs.

The proposal states, “The picture element represents a list sources of image data and associated attributes that define when an image should be used. Image data sources may be explicitly declared based on media queries or can be suggested to the browser via the srcset attribute on the picture element.”

Here’s some example code.

<picture alt="">
	<source media="(min-width: 45em)" 
 srcset="large-1.jpg 1x,large-2.jpg 2x">
	<source media="(min-width: 18em)" 
 srcset="med-1.jpg 1x,med-2.jpg 2x">
	<source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
	<img src="small-1.jpg"> 
</picture>

New elements and attributes you’ll notice in the example code include the source element and its srcsetattribute. Each source defines one or more image sources and the conditions under which that source should be used. The srcset attribute is a comma separated list of URLs for alternate resources for a single image at different resolutions.

You see a 1x or 2x designation after the image name. This is a reference to resolution, with 2x being a high resolution image meant for high res (aka iOS retina displays which have made everyone’s images look like crud) devices.

Finally, the example code ends with a fallback img element for devices that don’t recognize the picture element.

Suggestions for how alt text should be handled have not changed and would apply to picture as they currently apply to img.

There is an attempt to describe cases like zooming, whether a device is displaying in horizontal or vertical orientation, and other potential snafus. You can read these in the full proposal.

Useful links: Decent Men, Google Fonts, Building Responsive Layouts

A Call to Arms for Decent Men by Ernest Adams is at idga.org. It’s a great post, very long, very well-written. Here are a couple of quotes:

Guys, we have a problem. We are letting way too many boys get into adulthood without actually becoming men. We’re seeing more and more adult males around who are not men. They’re as old as men, but they have the mentality of nine-year-old boys. They’re causing a lot of trouble, both in general and for the game industry specifically. We need to deal with this.

. . .

Use your heavy man’s hand in the online spaces where you go – and especially the ones you control – to demand courtesy and punish abuse. Don’t just mute them. Report them, block them, ban them, use every weapon you have. (They may try to report us in return. That won’t work. If you always behave with integrity, it will be clear who’s in the right.)

Let’s stand shoulder-to-shoulder with the women we love, and work with, and game with, and say, “We’re with you. And we’re going to win.”

A very nice resource indeed: Google Fonts Reference Posters.

The exceedingly awesome Zoe Gillenwater released her slides from a Building Responsive Layouts talk. You can find them on slideshare, and see them here:

Building Responsive Layouts from Zoe Gillenwater

Deborah Edwards-Onoro was present at Zoe’s presentation and created a Storify version of it with tweets and images as well as the presentation.

Make the Election Digital

It’s a high tech political season. According to Journalism.org both campaigns are using digital tools to make direct contact with voters. Your inbox, your social media sites, and the apps on your smart phone may play a part in how you deal with the election.

The Fight 2012: Cain and Todd Benson via photo pin cc

There are many apps and online tools that you can use to help get through election season and make a choice about your vote.

Truth Finding Apps

Several apps help you find the truth behind the statements and ads. The Super Pac App for iPhone and iPad can listen to an ad and then tell you who paid for it. The Super Pac App was created by MIT Media Lab students. Ad Hawk from the Sunlight Foundation does a similar thing – listens to an ad and then tells you who is behind it and who is spending the money on the ad. Ad Hawk works on iOS and Android.

Another fact checker is PolitiFact’s Settle It!. Settle It! tells you what the real facts are behind political statements, pulling its information from the PolitiFact site.

The Washington Post has an iPad-only app. According to Poynter.org the app organizes a new section called The Forum,

with easily browsable Twitter lists that organize more than 300 relevant accounts into six groups: news outlets, campaigns, partisans, prominent office holders, fact checkers, and jesters (like @ColbertReport and @LOLGOP).

Candidates’ Apps

Mitt Romney had an app just to announce his VP choice. That’s old news now, but an interesting concept in a single purpose app. Perhaps there will be more from the Republicans like this.

Barack Obama’s app is Obama for America and is aimed at neighborhood get-out-the-vote organization and help. This technique worked for the Democrats in 2008 and they are sticking with it.

On the Obama web site, you can compare Obama and Romney tax cut plans to see how they would affect you. There is a description below the fold on this page about how the calculator works and where the information came from (The Tax Policy Center).

Convention and News Watching

Time Warner has a CNN-Time Convention Floor Pass that brings you convention news. It’s for both iOS and Android devices.

NBC Politics is designed to bring a steady stream of political news to your smart phone. NBC Politics is from MSNBC. Fox News also has a political news app, You Decide 2012 Map. You Decide 2012 is only for iPad. If MSNBC and Fox News don’t do it for you, you can always get the politcal news app from Politico.

If you’re into poll watching, Talking Points Media has a Poll Tracker app that tracks polls in real time.

Voter Registration and Voter ID

Rock the Vote has an online voter registration form.

The Cost of Freedom Project is tracking which states are requiring photo voter ID. You can check state by state voter ID requirements at this site.

Choosing Between the Candidates Sites

There are several sites that promise to help you identify which party you should give your vote to. The Political Party runs you through a series of questions and identifies the candidate who should get your support based on how you answer the questions. The Political Party claims to be nonpartisan and has a set of FAQs that tell how they determine how your answers align you, party-wise.

Politify shows you the impact of the two candidates avowed plans for the country on a personal, local and national level. The site uses IRS and Census data to find where household income comes from and what government services households use. The app then produces a simulation of how President Obama and Mitt Romney’s economic plans would affect specific areas of the country. You can go for a wide view, or take it down to your own zip code.

Election Watching in Other Ways

Even Amazon.com can resist getting into the act. According to Puget Sound Business Journal, Amazon published a “heat map” of political book sales that shows where U.S. residents are buying conservative or liberal books. I’m not sure this proves anything, but it’s interesting to examine.

Venture Beat tells us that Facebook and CNN have teamed up to create a Facebook I’m Voting app that will add more politics to your news feed. Could it be that a Facebook wall full of the politcal opinions of your friends isn’t enough for some Facebook users? Hard to imagine.

You can listen to radio shows and podcasts about the election with Stitcher. Stitcher has a special new category called Election Center that lets you choose particular candidates, commentators and sources to follow.

Whether you use these digital tools to explore both sides of the issue or support your already firmly held opinions, there’s something perfect for you in the race to November.

[Note: Cross posted at BlogHer in a slightly different form.]

Live Blogging What I Learned at WordCamp Albuquerque

I went to several sessions at WordCamp Albuquerque and took a lot of notes. Consider it a live blog of the events I attended.

Designing for WordPress

@alternatekev alternate.org

(Sorry, didn’t notice it was out of focus while it was on the phone)

In designing for WordPress, forget about the canvas.

WordPress designers design for front end users and also for the back end users. WordPress has content blocks, many types of content, sidebars, custom menus. Build in the ability for users on both sides to customize. Better to lean toward customization than controls. Think about how the things you design will be intereacted with by the user within the dashboard.

Need to know what features each content type has. Some content blocks can be sticky and stay at the top.

Need to know how different numbers of menu items will be needed, what type of plugins users want, what part of the template do I build and what does the user edit.

Theme structure: home page, blog river/posts page, single blog page, category listing, author bio page, post format templates, search results, search form, sidebar(s), post s archive, 404 page, basic page template.

Posts can have different formats. Chosing a different format for a post can change the way the post looks. So could have post format for products, videos, etc.

Can have featured images. It’s a module that you see next to Insert Into Post when you add an image. There’s a plug in that makes the first image in a post into a featured image.

Pages are a custom post type, can be ordered, can be hierarchical. Pages can have different templates. Page templates for empty pages can be tied to custom post types. Use Post Type Labels to create custom post types.

Child theming. Based on a parent theme of your choice. 2011, 2012 both built to accomodate child themes. Use a comment in the index.php page to link to the parent template. Kevin was unclear about how to do this. He showed us some code but the relevant line was missing. (I was confused about this, but got it cleared up later.) StudioPress.com has a theme framework called “Genesis” and you can use child themes with it to customize. Stay away from Thesis! Carringtontheme.com has good frameworks. _s is a theme that can be customized easily (made by Automattic). functions.php will always run in the parent theme first, but can be overridden in functions.php in the child theme. An advantage of child themes is when a theme automatically updates, changes in the child theme are not overwritten.

WordPress is Just the Beginning

Kimanzi Constable @KimanziC talesofwork.com

We all want to be heard. We all want people’s attention. There are 54 million WordPress websites and 3.1 billion people online every day. So how do you get heard among all that.

Why do you want to be heard? Fame? Money? Impact? Social media creates an open door but you need to think about the quality of your audience. How many comments do you get? How many retweets. Quality, not quantity.

Quotes Peter Drucker, “People buy with their hearts, not their minds.” Connect with people through your story, emotions.

Talked about Amanda Hawking, another person who hated her job and wanted to publish a book. She self-published using only social media sold 10,000 copies in the first month. She got some book reviewers to review her books and used social media.

When Kimanzi tried it he sold 3 copies in two months after spamming everyone he knew on Facebook and Twitter. He asked himself, “Why do I want to be heard?” He refocused on the message that helped people get out of jobs that they hated. He focused on helping people. To get traffic, he tried guest posting on larger blogs. That brought in traffic and created book sales. He blogged a lot on topics that people could relate to so the traffic that came subscribed and shared.

Do companies use story? He talked about how Apple uses story and emotion to connect with buyers. Use your story. I kept thinking about that very cute Nintendo DS ad with Penelope Cruz and her equally gorgeous sister playing some Mario game as a great story example.

Be honest. Be to the point. When you use social media to tweet a link to a blog post, tap into the emotion of the post. Click through rate increases when you throw in the story. When you connect, thank people and share.

Story. Lesson. Story. Lesson.

Make your about page tell your story. Then get them to opt in and subcribe.

Use your story to network.

High-Performance Front-End Development

Ben Byrne, Cornershop Creative

Speed. Page load time makes a huge difference in making people not like your site. Google takes page load time into account when figuring your page rank.

He will be talking about what gets delivered to the page.

Enemies are DNS lookups, HTTP connections, sequential loaading, bloated DOM, bloated CSS, Payload size.

DNS lookups. Every domain mentioned on your page needs to be resolved to an IP. If you have DNS lookups for scripts, assets, images, etc, each has to be looked up. Want to keep it to four or under. Includes anything loaded to your page – script, image, css, font, etc.

HTTP connections. Site will load faster if you reduce http connections.

Can use SASS to compress files. Plugin W3 Total Cache does that on WordPress. Plugin W3 Cache also does compression. This plugin will also combine and compress your JavaScript files. Manually put jQuery plugins into a single file.

CSS sprites put all your images into a single image. There are plugins that help with this. Ben did not list them.

Lazy-load defers images from loading right when the page loads. There’s jQuery “lazyload” for images. The image loads when the browser is scrolled to where the image is needed. There are attributes “defer” and “async” that can be used with script tags that put off loading the resources immediately.

Don’t use images when CSS can do the job: gradients, rounded corners, text and box shadows, rotation. May need some fallback content for older browsers if browser doesn’t understand CSS3.

Sequential loading. Somethings load in parallel and some things load in sequence. JS files are loaded in sequence and block others. The browser basically stops everything until the JS load is finished and the browser sees what it’s going to need to do.

JS should be at the bottom of the page whenever possible. CSS should be at the top of the page and loaded with <link> rather than @import. (Did you hear that, Adobe?)

A bloated DOM with all sorts of structural elements like nested divs can slow down page loads. There’s no magic number, just don’t have elements on a page that you aren’t really using.

Bloated CSS can slow you down. Long selectors can slow you down when a short selector might do. CSS parsers read from right to left so it loops through the DOM looking for every element named in a dependent selector for everything listed in the selector. Don’t use unnecessary stuff like div#main when #main is all you need.

Reduce total number of bits by using Minify CSS and CSS and HTML, write clean code, don’t scale images in the browser, use the right image filetype. You can blur in unimportant parts of JPGs to reduce the file size.

Good resource developer.yahoo.com/yslow

Chat Me Up! Using Social Media to Promote Your Blog

Lauren MacEwen SM Cubed Consulting

No slide deck – interesting. She’s just standing there talking, no script, no speakers notes.

Numbers and analytics can tell you how you are succeeding. How many people are coming to your blog, how long are they staying there. Google Analytics, Stat Counters, and others can tell you many things – often different things – about how well the blog is doing traffic wise.

What number is success? Look at your audience. How big is your audience? Maybe 100 visitors is a big chunk of your audience, maybe 500,000 is.

She likes Scribe SEO, a plugin that helps your blog with SEO. Some ad networks may help with SEO. She mentioned adSense, but I’ll bet BlogHer’s ad networks help with SEO as well.

She says Google+ is the best website to be on for promoting your site. If you post a link on Google+, you are instantly indexed. Results coming from Google+ are integrated into search results.

Make sure your blog posts are a minimum of 300 words. Google only recognizes a post as new content if it is over 300 words. Video with text helps with indexing for SEO.

AdSense has a free keyword tool. Gives you keywords for blog posts or your whole website.

Facebook and blogging is long tail marketing. Twitter is short tail marketing. Twitter is good for SEO, especially when using hashtags. She recommends putting things on Twitter multiple times a day. A tool like HootSuite lets you schedule tweets.

Using bit.ly lets you customize your links. Then you can see specifically which tweets are getting more hits. Put the link in the first 1/3 of a tweet to get more clicks. Twitter has the broadest audience. There’s a niche for everyone on Twitter. The more you tweet, the better your results are. The bigger your audience, the more you need to tweet.

Using third party apps to post to Facebook may mean your posts don’t get the attention on Facebook.

A Chat in the Happiness Bar

I stopped into the Happiness Bar and had a chat with one of the Happiness Engineers from Automattic. He explained that you mention the name of the template that is your parent theme in the CSS file for the child theme – thus clearing up something I misunderstood earlier in the day. He told me 2011 and 2012 both have responsive design built in, so I may want to update my theme to a child theme of one of those. Can’t imagine why – I’ve only been using Very Plain Text since 2001.

6 Cloud Computing Videos to Explain Everything You Need to Know

When the cloud is involved in something, it is just bound to become a sticky situation. There is a lot of technology and a lot of data involved whenever the cloud comes into play. And not only can it lead to all sorts of different technological issues, but private information of countless individuals can be at stake when something happens with the cloud. But on the plus side, the cloud has also got a lot of good points about it. The following videos will explain a lot of important information that might not be obvious to you.

6. Marcus J. Ranum on Cloud Computing Security

This video is important and educational – not because it is actually going to teach you anything about cloud computing, but because it is a great example of how not to sound when someone asks you a question about the topic. Cloud computing does not go through the regular mail, and there are no foggy clouds. And if you want to know the level of expertise a person carries with regard to cloud computing, have them watch this video and study their reactions. The harder they laugh, the more they actually know about the subject.

5. Cloud Computing Explained

Do you actually know what cloud computing is? If you are like a lot of people, the answer is no. If you would like to know the basics of cloud infrastructure and hosting, this video breaks it down for you. If you watch the videos that come after this one on the list first, you might find yourself lost.

4. Cloud Computing Security

This is a basic discussion of how security differs on public versus private networks. If you have been considering both possibilities for your business, this is a very valuable video to watch. It is short, concise and will help you make a responsibly informed decision.

3. Security Concerns in Cloud Computing and SaaS

This might be the scariest video out of the entire lot. While every video here will help you to see how vulnerable you really are, this man admits outright that most major companies are not very secure with their data, which might be your data, too.

2. Chris Richter on Cloud Computing Security and Compliance

Mr. Richter lays it right out – this is the start of a long thought process for you. There are compliance auditors, who are out to make sure outsourcing is being done reliably. He also makes a great point about making sure that the data centers you outsource to can essentially field strip their own server architecture. “Know thyself” has never been more true.

1. Evolving Role of the Data Center (in the Cloud)

The data center of the past is an endangered species. The more the cloud comes into prominence, the less people should be necessary to maintain the data center.

Some of the info contained herein is a bit radical. Most will get you thinking a lot about how safe your data really is. But in the end, these videos will take you a good way down the path to a higher level of outsourced data handling understanding.

Guest Author: Jessy is the creative writer for Storage.com, Miami FL self storage aggregation tool owned by Self Storage Co, LLC, and founded in 2010.