Web Teacher » CSS

Useful links: Influence, Font Previewer

vdebolt — Fri, 30 Jul 2010 12:29:51 +0000

From The Access Point, a listing of the most influential women’s voices on the web.

ABIE from Access Communications

The Access Point is using the post/graphic to bring attention to their new ranking tool, ABIE, that “determines online influence based not only on data from the top ‘ranking’ services out there, but also on factors such as audience engagement levels and the frequency original content is shared across the social Web.” I don’t see where they’ve done a similar thing for influential men.

Google Font Previewer is super helpful. As I mentioned in an earlier article, Embedding fonts the Google way, it’s very easy to use fonts from the Google font directory. Now Google has provided an app that lets you pick one of their fonts, apply some CSS3 text-shadow, and set a few spacing options. You see how it looks in the preview. It spits out some code you can copy.

This font is called Lobster. Here’s how I made it look in the preview.

This is the code the app provided:

The code could use a bit of editing to remove unused properties (e.g. text-transform: none;), but it is a time-saver to see how text is going to look with the text-shadow styling.

Useful Links: Box-shadow, HTML5 on the job

vdebolt — Thu, 22 Jul 2010 12:23:42 +0000

Cross-browser CSS box-shadows at Opera Dev shows you how to make it work.

Demand for HTML5 Skills on the Rise, Report Says at Web Worker Daily quotes a study showing a 474 percent increase in demand for HTML5 developers at online job posting sites. Are educators working HTML5 into the curriculum? When do you think it’s appropriate to introduce HTML5 to students?

Useful Links: Reason, Border-radius, Cognitive Surplus

vdebolt — Thu, 15 Jul 2010 12:14:41 +0000

Reason is an open source CMS that several colleges have used with success. How Luther College is Using Reason, is a thorough review of its pluses and minuses.

Border-radius. Put a number in one of the corner boxes and there you go.

Cognitive Surplus: Creativity and Generosity in a Connected Age. Beth Kanter reviews Clay Shirky’s new book and then offers to give it away, along with her newest, The Networked Nonprofit.

In the mind of Copyblogger there’s a great HTML blog

vdebolt — Wed, 14 Jul 2010 16:34:42 +0000

You know Copyblogger, right? Copyblogger is Brian Clark, the genius writer with a kajillion followers who gives good advice to bloggers about how to get traffic and keep readers coming back.

I was playing a game in my head with some of the Copyblogger headlines, thinking that if people who wrote about HTML and CSS and stuff like web education used his headline techniques, there would be a lot more traffic to web dev blogs.

Here are some examples of how the game goes. Feel free to suggest more.

Copyblogger said: How to Find Thousands More Prospects for Your Business
I said: How to Find Thousands of Web Standards Tips

Copyblogger said: How to Develop an Endless Source of Ideas that Sell
I said: How to Develop an Endless Source of HTML Tutorials that Deliver

Copyblogger said: Want More Readers: Try Expanding Your Internet Universe
I said: Want More Semantic HTML? Try Developing Your List Elements

Copyblogger said: 7 Essential Steps to Creating Your Content Masterpiece
I said: 7 Essential Steps to Optimizing Your CSS

Copyblogger said: The Grateful Dead 4-Step Guide to the Magical Influence of Content Marketing
I said: The Grateful Dead 4-Step Guide to the Magical Influence of Accessible Forms

Copyblogger said: Improve Your Writing Overnight with the Rule of 24: Guaranteed
I said: Improve Your Code Overnight with the Rule of 24: Guaranteed

I need to start playing this game in real life.

10 Terrific Tech Blogs by Women

vdebolt — Tue, 06 Jul 2010 12:10:08 +0000

Tech tips, geeky how-tos, thoughtful analysis of issues, news about the latest gadgets, ideas for improving your blog—you’ll find it all in these 10 terrific tech and science blogs. They just happen to be written by women.

I. Hacker Chick

The Hacker Chick Blog is a beautiful starting point. I say beautiful because the graphics on this blog are stunning: everything from the image representing the hacker chick (software developer Abby Fichtner) to the icons and images used as illustrations are visually outstanding. Hacker Chick writes about designing WordPress themes, agile computing, programming, social media, and business.

In Build Your Startup From the Heart, she said,

The world, it seems, is changing. If you ask Daniel Pink, he’ll say that our “left-brained” aptitudes — logical, analytical skills, the types of things schools reward us for — are no longer sufficient if we want to remain competitive. These are, after all, the very things being automated by computers and outsourced at rates we can’t compete with if we want to pay our mortgages, or, say, eat.

If we truly want to succeed, we need to pull in those right-brained skills that our schools & employers have tried so hard to beat out of us — artistry, empathy, play, and story telling.

You don’t find many programmers who think this way, or who can pull it together the way Hacker Chick does.

II. Pars3c

Elizabeth Howell has her head in the stars with her blog Pars3c. The blog is pronounced “PAR-seck,” and astronomical term that gives you an idea of the topics you’ll find on the blog. This blog is about astronomy, spaceflight, science and telescopes. Big telescopes.

In 500 explosions, 500 reasons to love satellites, Elizabeth said,

I’ve said this before, and I’ll say it again — the greatest thing about space-borne observatories is they have 24-hour darkness to enjoy. This makes it easier to catch fleeting cosmic events, even explosions.

Like that moment last month when NASA’s Swift telescope saw its 500th gamma-ray burst.

III. Blogger Buster

Blogger Buster is for Google Blogger users. It’s written by Amanda Kay. Blogger templates and tutorials are the heart of this blog.

For example, you can learn about 90 Related Posts with Thumbnails for Blogger – New Version by BloggerWidgets

Aneesh of Blogger Widgets has developed a new “Related Posts” script for Blogger which displays thumbnails of images in addition to linked post titles.

In appearance, this Blogger “add-on” is similar to the LinkWithin script. Each section is highlighted in a complementary colour when the mouse hovers over it, and the entire section is clickable, leading to the URL of the “related post” displayed.

IV. Girl Developer

Girl Developer is written by Sara, a software engineer. Her topics range among .net and WAN, tech events, software reviews, and life as a developer. There’s always a dash of style and humor in the mix. Recently she wrote about Meeting Wendy Friedlander, a fellow developer who is undergoing cancer treatment.

Meeting Wendy prompted her to put together a fund-raising dinner:

I put this dinner together because I think it would be wonderful if we could all help Wendy a little as a community. She’s one of our own and it really could be any one of us. We’re having a dinner for Wendy, and if you’re in the NYC area and can make it we’d love to have you. It will be a great time of fellowship with other developers and I’m looking forward to it. If you can’t make the dinner or aren’t from the area there is a paypal link here for donations.

V. Do it Myself Blog

Do it Myself Blog is the work of Glenda Watson Hyatt, the left-thumb blogger—so called because she types only with her left thumb due to her cerebral palsy. Glenda writes about accessibility on the web and in life, about events she attends and speeches she gives with the help of her computer’s voice, about new technology, entrepreneurship, and trying to find an accessible bathroom while at tech events.

Lately Glenda has been searching for the perfect app for her iPad that will help her with chores like making hair appointments and ordering burgers. In The iPad as an Affordable Communicator: A Follow-up Review, she commented

While I was at the mall last Tuesday, i also made a hair appointment. In the old days I would have typed a note before leaving home. Or, I would have asked Darrell to call for an appointment.

Tuesday i pulled out my iPad, typed a message in the Proloquo2Go app and showed it to the receptionist. An appointment was made for the following day.

All is not golden with the Proloquo2Go app, however, as Glenda discovers when she tries to order food.

VI. Apophenia

Apophenia is danah boyd’s blog. This blog deals with big ideas. It focuses on issues: trends, analysis, data about how young people use technology, and topics like privacy.

In “for the lolz”: 4chan is hacking the attention economy , danah explains what 4chan is with a “Newbie Note” before she begins her discussion of the site:

Newbie note: If you have never heard of 4chan, start with the Wikipedia entry and not the website itself. The site tends to offend many adults’ sensibilities. As one of my friends put it, loving LOLcats or rickrolling as outputs is like loving a tasty hamburger; visiting 4chan is like visiting the meat factory. At some point, it’d probably help to visit the meat factory, but that might make you go vegetarian.

danah boyd is quite possibly one the the smartest people on the planet, so running big ideas through her mind and getting to read the results of her thinking on her blog is a true privilege.

VII. The Female Perspective of Computer Science

The Female Perspective of Computer Science is from Gail Carmichael, who is working on a doctorate in Computer Science. Her fields of study include educational entertainment and augmented reality, both of which get discussed on the blog. Other topics include visual computing, games, events, computer science, and women.

Recently she wrote about Getting the Hang of iPhone Development.

I needed to learn how to develop for the iPhone since the projects I want to work on next will be games for the device. This task was somewhat daunting, given that I hadn’t really even used a Mac before, let alone Objective-C or Xcode. Luckily, there are some really great resources out there that you should check out if you are also just getting started.

So far, the most invaluable resource for me has been the Stanford iTunes U lectures on iPhone development. After watching the lectures via iTunes, you can download all the course materials, including slides and assignments.

A free course from Standford so you can learn how to develop for iPhone? Dang, that’s great information!

VIII. Geek Feminism Blog

Geek Feminism Blog has over a dozen writers, mostly women. A few male feminists in the mix is a good thing. The range of topics you find there is as wide and deep as the minds of its many contributors. The frequent linkspam posts are a great source for exploring the blogosphere on topics related to technology and women. Other topics you might find explored there are comics, conferences, gender, open source, programming, star trek, and just about anything else you can think of that interests geeks.

In July 6th is the last day for super early bird rate for Grace Hopper Celebration, Terri tells us,

If you haven’t heard of GHC before, it’s a really amazing conference for women involved in technology (especially geek feminists!). Not only does it tip the usual ratios on their heads (hello, >90% women! And yes, that means men are welcome.) it’s one of very few conferences where I can say that even the most technical talks are interesting and well-presented.

IX. CSS, JavaScript and XHTML Explained and Standardista

CSS, JavaScript and XHTML Explained is by Estele Weyl. The title is self-describing, but doesn’t completely cover the range of what you find there. You might learn about conferences, girl geeks, browser quirks, accessibility and other web development related topics. Estele has another blog called Standardista: CSS3, JavaScript and HTML5 Explained that is similar but devoted to newer technologies such as HTML5. As the technologies move forward, the newer blog may get the most additions.

Estele is great at putting things in an organized matrix to help you quickly see what is what with a topic. For example, in HTML5 Input Attributes & Browser Support, she created a handy table to show which browsers support which of the new HTML5 form elements.

X. MacTips

I saved a great one for last: MacTips, the very helpful guide to Macs, iPhones and iPads from Miraz Jordan. The tips never end at MacTips. For example, Use Safari 5′s Reader for easier reading on the web and How to change app Preferences on an iPhone.

Miraz always has clear directions with informative illustrations and screen shots to guide you through all things Mac.

Cross-posted in slightly different form at BlogHer.

Red Hot Web Teacher Tips

vdebolt — Tue, 29 Jun 2010 11:42:44 +0000

The butterflies at the Butterfly Pavilion at the Rio Grande Botanical Garden are a treat.

The hot stuff for the past week includes

Make Rounded Corners with CSS3

vdebolt — Wed, 16 Jun 2010 12:14:52 +0000

There’s a new version of Cascading Style Sheets (CSS) in the works—CSS3. With this new set of rules for styling your blogs and web pages, you can do things that previously could only be done with images.

One bit of magic that you can do with a CSS style rule now is make rounded corners. You can apply rounded corners to borders, fieldsets, or anything that has a border line around it.

Everything on a web page is in a box. Every paragraph, heading or image you stick on a web page is bounded by a box. Usually you aren’t aware of the box, because you don’t see the borders—the boundaries of the box are not visible. If you put borders on the box, the edges of the box are made visible. Borders frame the element on the page and help separate one sort of content from another. The default borders create square cornered rectangles.

I’ve used rounded corners in several places on this blog. Here’s a specific example. I have a slideshow from Flickr in my sidebar. I put a border around the heading and the slideshow to separate that particular bit of content on my page into a unique element. I made the border have rounded corners.

The Rounded Corner How To

Find the relevant rule in your stylesheet. Every part of your page probably already has some style rules in place. If there’s already a border rule, change it. If it doesn’t have a border rule yet, add it. Here’s what I did in the part of my stylesheet where I styled the slideshow:

#womenintechslides {
border: solid 1px #3CF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

I’ll explain the rule. I added the slideshow to my HTML page using a div with the ID “womenintechslides.” The rule styles that div. First I set the border itself. I made it solid. I made it 1px in width. I made it an aqua color represented by the code #3CF. That much alone would add a border, but the border would have square corners.

The CSS3 property that rounds corners is border-radius. For that property, give a value in pixels to set how curved you want the corner to be. If you go beyond about 18px for the radius, it starts to look bad (pixelated), but try various numbers to find what you like.

CSS3 isn’t set in stone yet. The various browsers are adopting bits of it at different rates. You have to add a couple of redundant border-radius declarations aimed at different browsers, at least for now. The -webkit-border-radius declaration is meant for webkit browsers like Safari and Chrome. The -moz-border-radius one is for mozilla browsers like Firefox. If you put the standards rule—border-radius—last, it will be the one used when all browsers finally get CSS3 implemented using the same rules. By that time, you’ll only need the border-radius rule and the others can be dropped.

That’s the whole magic trick: border-radius. Go round something off.

CSS Summit

vdebolt — Tue, 15 Jun 2010 21:22:43 +0000

Environments for Humans is putting together the 2nd online CSS Summit for July 28. If you are teaching CSS and want to get an intensive (and interactive) training session on CSS3 right at your own desk, I suggest you check this out.

I just attended an Environments for Humans (e4h) summit and can testify to the fact that it went well technically, the speakers were excellent, the interaction is immediate, and the presentations were top notch. The CSS Summit has a wonderful roster of speakers and promises to be a great CSS3 learning experience.

Act fast, the first 50 tickets are a bargain.

Useful Links: SVG, BAM, InterACT

vdebolt — Tue, 15 Jun 2010 12:39:41 +0000

Doug Shepers from the W3C put together a slideshow in SVG, HTML, CSS and JavaScript that is worth your time. It’s an SVG demo. Play with it. View it in the latest Firefox.

BAM or Blog Accessibility Mastermind is a six lesson course offered by Glenda Watson Hyatt of Do It Myself Blog. I haven’t looked inside the course, but I suspect it’s a good one.

Based on the interest and number of questions Derek Featherstone got during his accessibility presentation at the recent InterACT Summit, I’d say interest from educators about accessibility is very high right now. There’s a free online course from the Web Standards Project (WaSP) InterACT curriculum about accessibility. The course is a perfect resource for teachers. It’s a stand alone course. If you are teaching with InterACT with Web Standards and its chapters on accessibility, the online material a great time saver. Online materials such as exam questions, grading matrices, assignments, objectives, and resources go hand in hand with the material in the book.

Useful Links: CSS3, elderbloggers

vdebolt — Thu, 10 Jun 2010 11:54:18 +0000

Showing and hiding content with pure CSS3 is a good tutorial from Opera developer Corey Mwamba.

Where it happens when you’re an elderblogger is one of the many things tossed around on Time Goes By. By that I mean, where the blogging happens. (Your mind doesn’t have to automatically go to those strange places, so stop it.) Here’s a series of photos showing where the elderbloggers blog.