Tips, web design book reviews, resources and observations for teaching and learning web development.
Drop Shadows with CSS for all Web Browsers from Robert Nyman gives you the code.
Creating Beveled Images with CSS from sitepoint gives 4 ways to accomplish the task.
don’t use @import is an older article, but has some good stats about @import VS. link in terms of high performance and speed.
How do you add borders to data tables with CSS? Depending on how you want the borders to display, it can normally be accomplished with three steps.
I constructed a small table and will show it to you as I move through the three steps. I’ll use a medium width, solid style border in the color #00f (blue) for all the border rules. With a width assigned to the entire table, and a border rule added to the table, here’s the beginning CSS.
table {
width: 40em;
border: medium solid #00F;
}
Here’s how that looks (in Firefox).
As you can see, applying a border rule to the table selector adds a border to the table only. Step two is to apply the border property to the td and th selectors as well. Here’s the new CSS.
table {
width: 40em;
border: medium solid #00F;
}
th, td {
border: medium solid #00F;
}
This is what you see now.
You may choose to accept this appearance. But you see that you have some spacing between the table cells between the borders of each data cell. If you don’t like that appearance, the third step will correct it. This step involves the border-collapse property. It is applied to the table selector, like this:
table {
width: 40em;
border: medium solid #00F;
border-collapse:collapse;
}
th, td {
border: medium solid #00F;
}
This rule eliminates the space between cells, but is implemented in a slightly different way in some browsers. Look at the effect in Firefox and Safari.
To my eye, there is a thicker border on the top and left in Firefox. (Before you decide that’s unacceptable and write rules to correct it, it would be good to see how other major browsers render the border.)
You can change the border style or width or color, but these three simple steps take care of getting a data table presented with borders.
Writing about HTML5 while it is still in a state of flux is like standing upright on a water bed while shooting a carnival rifle at a moving row of ducks. What I’m about to tell you is based on the HTML 5 working draft dated 4 March 2010.
In HTML5 terms, the <article> element is considered sectioning content, as is the <section> element. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. A blog post, therefore, makes the most semantic sense to me when it is marked up as an <article> element. It can be syndicated as a unit.
An <article> element can include a <header> element, which could contain <h1> through <h6> elements marking up things like the article title, author’s name, publication dates, and other material that makes sense. Within a <header> element, you can nest an optional <hgroup> element, which is header group, or a related group of elements within a <header>. In HTML5, each <article> can have its own <header>.
An <article> element can include a <footer> element. The <footer> could contain links to comments, various permalinks, options to share the post on Twitter or Facebook or StumbleUpon, an hCard, or other material relevant to the article content. In HTML5, each <article> can have its own <footer>.
Based on that background information, here’s sample markup for one way to format a blog post with HTML5. I suggest a few ways to add content, but there are many more ways to deal with this. For example, you might want the pubdate in the footer.
<article>
<header>
<a href="#" rel="bookmark" title="post title"><h1>Article title</h1></a>
<h2>Author's name</h2>
<p>Published <time pubdate datetime="2010-03-26T18:26-07:00"></time>.</p>
</header>
<p>A lot of great article content.</p>
<footer>
Footer info here: comment links, whatever.
</footer>
</article>
New Game Designed to EVOKE a Better World tells about several projects involving game playing that Jane McGonigal is leading. These virtual reality games are designed to solve difficult real life problem and make real life changes. This excellent article by Kim Pearson also contains video of a recent TED Talk by McGonigal, which is a must-see.
Aviary continues to grow and improve. It’s now available in Google Docs. This is good news for educators, as this video shows. Aviary is readying an education program. If you’d like to be a beta tester for this education program, sign up here.
Don’t put hints inside text boxes in web forms from UX Matters give some excellent reasons why you should stop teaching anyone to do this, if you still are.
Glenda Sims is a whirlwind of accomplishment in information technology, web education, museum accessibility, web accessibility and web standards. She’s someone who makes things change and gets things done, and the worthy honoree of attention on Ada Lovelance Day.
Ada Lovelace Dayis an international day of blogging (videologging, podcasting, comic drawing etc.) to draw attention to the achievements of women in technology and science.
Take a visual tour through Glenda’s life, from her childhood in Texas to her current position as Senior Systems Analyst in Information Technology Services at the University of Texas at Austin.
Her blog is Oz: the blog of glenda sims (the goodwitch) and she’s @goodwitch on Twitter. The rest of her information is listed at Flavors/goodwitch.
Before we get into the professional activities that made her an Ada Lovelace topic, let Glenda tell you a bit about her personal life.
I’m happily married (20+ years) to the love of my life, Scott. We have two of the most wonderful children on the planet (both boys). I am a native Texan. Born in Houston. Bachelor’s Degrees in Psychology and Business Management from the University of Texas at Austin. Began my career as a human resources professional at UT Austin. Had an opportunity to become a programmer (for Human Resources) so I could automated the tasks that could be done by computers, allowing employees to use their brains for more useful tasks.
I love to read. I’m really into kid-lit and discovering new authors with my youngest son. Last year we had a blast reading almost all of the book son the Texas Blue Bonnet Reading List.
One of my favorite things to do as a kid was to making jumping origami frogs…and yes…I still love to make them.
At UT-Austin, Glenda works on Team Web and help supports the central web site for the University. She is the self-appointed web standards and accessibility advocate at UT. Her work on campus includes museum technology, usability, accessibility and universal design. She’s currently leading the project to redesign UT’s mobile web site.
She works with Knowbility, an accessibility training and advocacy organization based in Austin, Texas. She’s been an accessibility consultant, judge and trainer with Knowbility since 2001. She said,
My dear friends at Knowbility are a huge part of who I am today. Sharron Rush, John Slatin, Jim Thatcher, Jim Allan and the whole accessibility crew in Austin have filled me with the burning desire to make sure that the web is available to everyone, regardless of their disabilities. Knowbility is like family to me.
I know Glenda best through her work with Web Standards Project, the InterAct curriculum, and OWEA (Open Web Education Alliance)—all projects I’m involved with myself. She’s an influential and dynamic leader in these projects and is moving mountains to bring change to web education. I asked her how she got into this area.
My journey into Web Standards started in December 2000 when I asked if I could become the web accessibility expert for UT. I was quickly introduced to Dr. John Slatin, an international accessibility expert and faculty member on our campus. John and I were an incredible force on campus. We shared new techniques, brainstormed creative solutions, developed training classes, policies and guidelines for campus and ran accessibility competitions for our webmasters. We weren’t merely satisfied with teaching the “how” of accessibility…we wanted to build a culture of universal design on campus and created accessibility evangelists. My years working with John were priceless.
John introduced me to Sharron Rush and Knowbility in early 2001. We become the 3 Accessibility Amigos.
In SXSWi 2005, I was preparing to speak on an accessibility panel with James Craig, Ian Lloyd and Derek Featherstone. As we worked on our game plan for the panel, I was introduced to a whole new crew of web and accessibility advocates from the Web Standards Project. As I sat and listened to the vision and plans of the WaSP members I felt deeply inspired to take my work to the next level. Up until 2005 I was focused on making things accessible here in Austin. After SXSW this year I realized that I wanted to act globally as well as locally. I set a personal and private goal for myself. I wanted to become a WaSP.
In 2006 I had an opportunity to volunteer to work on a project that Molly was kick-starting called the WaSP International Liaison Group (ILG). Steph Troeth and I were asked to co-lead this project. I had the honor to work for more than 2 years on this project with an incredible group of web professionals who spent countless volunteer hours spreading the message (and the techniques) for ensuring an open web.
Glenda delights in telling the story of how InterAct and the now-forming Open Web Education Alliance came into being at SXSW in Austin. Here’s how she describes it.
At SXSWi 2008 I met the energetic Aarron Walter at the Red Eye Fly. Aarron had this idea that what the web really needed was a web education curriculum framework. His vision to build this framework as a way for educators, industry professionals and students to build and sustain a living curriculum gave me goosebumps. Within 24 hours of my conversation with Aarron, I was approached by Chris Mills who was already working on a similar and complimentary project (the Opera Web Standards Curriculum). Then Leslie Jensen-Inman and I were having a conversation where she was focused on solving the challenges of teaching the web and preparing students for real-world expectations.
I shook my head and said…”this is the magic of SXSW”…and realized I had to get these three people together. The next round of conversations took place in the middle of a bowling alley (at Geeks Love Bowling) and continued throughout the conference. The result of these conversations (and the hard work of many dedicated individuals can be seen at interact.webstandards.org.
Every time I talk to these people, whether it is in person, Skype or email, I’m filled with energy and excitement of what we can accomplish when we pull together.
In early 2009, John Allsopp was hosting Web Directions North in Denver. John has heard about the InterAct Curriculum and brought many members of the InterAct team together to host a Ed Directions Day in Denver. The synergy that occurred in Denver was off the charts. What happens when you add equal parts of WaSP/InterAct members + Passionate Educators + Web Industry Visionaries + Brilliant W3C Minds? You get the magic we call the Open Web Education Alliance.
A completely different facet of Glenda’s personality is her love for art museums. She said,
I’m deeply and madly in love with art museums. And there is nothing I enjoy more than making museums and their collections accessible. I have had the great honor of working on a number of projects with the Blanton Museum of Art. My favorite project was developing an interactive handheld tour (iTour) for a research project. The research question: Does having access to rich multimedia (on a handheld device) enhance or detract from the experience of exploring a work of art inside a museum gallery. Our research paper is published. The iTour project lead to a string of exciting adventures with Anne Manning, Dan Updegrove and Eric Guaglione.
If you attended SXSW Interactive this year, I hope you ran into Glenda there. She was on a Web Education Rocks panel with the WaSP team. She says,
I have the great fortune of living in Austin where the amazing SXSW Interactive Conference occurs every year. What is SXSWi? It is like spring break for geeks…where geeks come to be with their own and dream beyond the edges of the horizon…and then…filled with some magically SXSW energy…actually turn those dreams into reality. SXSW is nothing short of magical.
She works to make the web accessible and she works to train the future professionals of the web. So, what does she look for in a web page?
There are two types of sites I love: 1)Super useful and usable sites 2)Immersive sites that make me think in an entirely new way.
One of my favorite “super useful” sites is Basecamp. If Basecamp were alive I would want to marry it.
One of my favorite “see things differently sites” is SFMoMA’s Art Scope.
I don’t think I look at websites like normal humans. I tend to turn websites inside, outside, upside down. I’m a big believer in the principles of creating a delightful user experience for the end user.
That is a fitting last comment from Glenda Sims. A big thank you to Glenda for her help and cooperation.
SXSW Interactive, a yearly geekfest in Austin, TX, is where I spent most of last week. I picked up on a lot of trendy new ideas, apps, and goings on in the tech world. Some of them may be of interest.
Everyone was using Gowalla and talking about Gowalla, comparing Gowalla with Foursquare, and even dreaming about Gowalla. There’s a constant stream of Twitter chatter about it. As you see in this tweet from @Goodwitch, you can set up Gowalla to tweet your whereabouts when you check in at a particular location.
Let me explain Gowalla, so you’ll have some idea if you want to give it a try. It’s a mobile phone app that does several things. It’s a social networking app that connects you with friends. It uses geo location to check you in to places where you go. Once you’re checked into to a place, a game-like part of the app kicks in. If you’re the first person to check in somewhere, you become the “founder” of that location and you get some video game style prizes. If others have been there before you, you can see who they were and when they were there. If a friend of yours is there when you are, you can see that. You can collect or redeem some of your prizes in whatever location you are in. You can download it for iPhone, Android, BlackBerry and palm at Gowalla.
There was a huge AOL display at SXSW, touting their new network called Seed. For writers, photographers and bloggers, Seed is of interest because it pays you for writing and photos. You can make from $15 to $100 on stories of various lengths that get accespted by Seed. But, be aware that you’re giving up all rights to the material for that money. Go to the site and see what current assignments they are seeking contributors for. If you’re interested, you can’t miss all the Get Started and Sign Up buttons.
Every badge at SXSW held a QR Code with contact information or URLs for the badgeholder. These codes can be read with a mobile phone that contains an appropriate app for capturing the information and adding it to your contacts. I saw very few cards change hands, but I saw a lot of people pointing their phone camera at someone else’s QR code.
You can get the apps here:
A handout in the schwag bag was from Stickybits. It contained a packet of stick-ons with QR Codes that you activate at the website and then use to identify your phone, computer or attach to something like a business card or photo. The QR code can contain whatever information you want. For example, the code block on a business card might contain the URL to your resumé.
Not long ago, Facebook started playing with QR Codes in Facebook profiles, according to TechCrunch. Are you ready to wear your Facebook profile on your tee shirt as a QR Code?
Fast Company found a cupcake company that is making QR Code Cupcakes. First you download it, then you down it. Tasty.
Stickybits makes QR code blocks for you that get sent to you as a stick-on. These can be attached to equipment, cards, or anything else where it makes sense to provide your contact information or URL.
New Research from ABI Highlights the Characteristics That Lead to Advancement of Technical Women. This is a summary. The full report is available as a PDF download.
A new approach to China on the Google Blog outlines their plans for dealing with the recent issues between Google and China.