Excellent Posters from Ada Lovelace Day

The Ada Lovelace Day website has some excellent posters for educating yourself and for educating students. The one that caught my eye first is the “Amazingly Enormous Careers in STEM Poster.”

Others include “Ten Types of Scientist poster,” “Ada Lovelace poster,” and “Mary Anning poster.”

You can download the posters from the Ada Lovelace Day website or buy them already printed out and ready to be put on display. Here’s the Careers in STEM one, not very readable at this size, but enough to give you an idea what you’d get if you bought the poster.

 

Wordcamp Albuquerque 2016

The night before the event, there was a planning meeting for the volunteers.

Sheila and Alonso make plans at a planning meeting

Sheelah and Alonso at the planning meeting.

Marketing Your Business with WordPress

Marjorie R. Asturias

Marjorie R. Asturias presented this talk.

Marjorie emphasized the importance of the home page, the about page and the contact page. She explained when a blog could be useful to your business.

Getting into CSS

Eric Debelak

Eric talked about CSS

Eric Debelak gave this talk. He explained how to find selectors being used on a WordPress site using a web inspector so that they can be modified. He explained how to set up a child theme so that you could create new CSS for your theme.

He mentioned something that I didn’t know: Albuquerque residents with a library card get free access to lynda.com.

Break Time

Ingrid and Elaine

Great conversationalists

Ingrid and Elaine were great chat partners during break time. Ingrid showed me how to use the web inspector in Chrome, which was very helpful.

During lunch I chatted with a woman from Denver named Sue. She drove down specifically for Wordcamp and was happy with what she was seeing.

WordPress.com for Business Sites

Elizabeth Urello

Elizabeth Urello talks about business sites

Elizabeth Urello gave this presentation. I’ve been inspired by her at previous Wordcamps and was looking forward to this one.

She talked about how to set clients up on WordPress.com in a way that enables them to maintain and keep the site updated themselves. She mentioned how beginner friendly and secure it is. WordPress.com has many new capabilites as well.

Wohoo! You Have Your First Website Up and Running. Now what?

Mark Carrara

Mark Carrara talks about the in-between stages of website building

This talk was from Mark Carrera. He talked about what you do in the in-between states of website building. What you do between deciding to build the site and getting it running. He works for a school and emphasized the importance so far fresh content on a website.

Unlocking WordPress as a Framework

Danny Santoro

Danny Santoro talked about unlocking WordPress as a framework

Danny Santoro talked about the components of WordPress and how those components can be used to build any sort of website you want. He talked about themes as for styling and display, not for functionality. He described some of the components to pull from.

Project Management 3 … 2 … Launch!

 

Hilary Fosdal

Hilary Fosdal talks Project Management

Hilary Fosdal spoke about the business of building websites rather than the development of the website. She talked about process – client intake forms, payment schedules, and business matters like that. Her talk was brilliantly organized and delivered. She should write a book about business process for creative firms.

This was my experience and my day at this year’s Albuquerue Wordcamp. Everyone has their own experience at these events, but you always come away with new information and new contacts and acquaintances. If there’s a Wordcamp anywhere near you, you’ll find it worth attending..

For Middle and High School Girl Coders: YouTube Series “My Code”

Girls Who Code, the national non-profit organization working to close the gender gap in technology, today released “My Code,” a YouTube series about learning how to code from the perspective of four female coders. The weekly series will air every Thursday on YouTube at YouTube.com/GirlsWhoCode.

“My Code” shares the experiences of four Girls Who Code alumnae: Audrey, Brittney, Margot, and Shannon. These real world role models and coders, all in high school, represent a diverse range of perspectives and interests in technology – from gaming to animation to social impact to web design. Every week, the cast of “My Code” will answer questions about what it’s like to learn to code and tackle a different perspective on their journey: from why they learned to code to the challenges they’ve faced and their plans for the future. The aim is to provide relatable and practical advice for teen girls who are interested in coding.

Reshma Saujani, Founder and CEO of Girls Who Code, said: “Teen girls increasingly take their cues about what they want to be from places like YouTube. In fact, 81.9% of US Internet users between the age of 14-17 are on YouTube. That’s a lot of teenage girls. We wanted to fill a gap we saw on YouTube and present relatable and inspiring role models for the next generation of women in technology. I often say that you can’t be what you can’t see. Our goal is to help girls see themselves as coders and, by doing so, start to close the gender gap in technology.”

Well before college, young girls have begun to opt out of computer science. While girls’ interest ebbs over time, the largest drop-off happens during the teenage years. Studies point to media portrayals of coders as “nerdy boys” and lack of roles models as key reasons that girls opt out. By college, only 18% of Computer Science majors are women. This gap then continues into the workforce and has major implications for our economy. By 2020, there will be 1.4 million open jobs in computing. Women are on track to fill just 3% of those roles.

Girls Who Code is a national non-profit organization working to close the gender gap in technology. Through its Summer Immersion Program and Clubs, Girls Who Code is leading the movement to inspire, educate, and equip young women with the computing skills to pursue 21st century opportunities. By the end of 2016, Girls Who Code will have reached 40,000 girls in every US state. Additional information is available at girlswhocode.com.

Working with rem in CSS

Working with rem in CSS

Is the relative measure rem new to you? Most people are familiar with the em unit of measure, but the rem hasn’t been around quite as long. It came into being with CSS3.

The definition of rem is “root relative em.” So a rem is really nothing new, it’s merely an em living in a very close relationship with the page root – typically the html element.

The default font size in most browsers is 16px. We equate this with a font-size value of 100% or 1em or 1rem. These are the relative font units used for responsive web pages.

To repeat, a rem is relative to the root. Why is this so important? Because an em bases font-size on the element it’s used on, and those sizes are inherited. For example, if a ul had a declared font-size of 0.75em, a nested ul within that list would have a font-size of 0.75em of the parent list.

On the other hand, if a rule for ul set the font-size at 0.75rem, any nested list would remain at that 0.75rem size because it is root relative, not relative to the parent element.

Browser support for the rem is very good among modern browsers. Why not give rem a try?

Attribute Selectors: All the Bells and Whistles

There are many types of selectors in CSS. If you’re still making your way through the darkness with nothing more than a few element selectors, a few classes, some ids, and the occasional pseudo selector, you need to find your way into the light with attribute selectors.

I wrote about Attribute Selectors in CSS back in 2008, but there are 3 new types of attribute selectors in CSS3. And they have good browser support.

Attribute Selector Basics

The basic syntax is to name an element, with an attribute in brackets following it, then give the CSS rule.

element[attribute] {
some rules here;
}

This rule, for example, would target any image with a title attribute.

img[title] {
some rules here;
}

This rule would target any anchor element with an href attribute.

a[href] {
some rules here;
}

Beyond that basic type of attribute selector, there are several operators can can be used to refine or broaden what you are selecting.

Using an equals sign, you can add specific values to the chosen attributes, making the selector even more precise. For example,

img[title="mybunny"] {
some rules here;
}

a[href="http://blogher.com"] {
some rules here;
}

The first example would select any image with the exact title attribute “mybunny.” The second would choose any link going to exactly “http://blogher.com,” but not to, say, “http://blogher.com/tech.”

The ~= operator select elements with an attribute value containing a specified word.

i [lang~="en"] {
some rules here;
}

This would match any italic element with a language attribute of English.

The |= uses the syntax |= to match hyphenated elements. This most often is used in rules targeting specific language declarations, where you might have hyphenated attributes in an HTML element such as en-US or en-GB. An example selector is:

body [lang|="en"]{
some rules here;
}

New in CSS3

The ^= operator uses the caret (^) with the equals sign to select what something begins with. It will match elements that have an attribute containing a value that starts with the specified value. For example,

a[href^="https:"] {
some rules here;
}

That selector would match only anchor elements with an href that began with https:.

The *= operator will match elements that have an attribute which contains the specified value somewhere in the attribute value. For example,

a[href*="blogher.com"] {
some rules here;
}

That would select any anchor element with an href value that contained blogher.com somewhere. This gives you a much wider sweep than the simple = operator.

Finally, the $= operator uses the dollar sign ($), which matches to elements that have a  specified value at the end. Examples:

img[src$=".gif"] {
some rules here;
}

a[href$=".doc"] {
some rules here;
}

These two examples would select only image elements ending with .gif or only href attributes ending in .doc.

Summary: How to Apply WCAG 2.0 to Mobile Devices

This slideshow requires JavaScript.

This post simply serves as a summary of the 4 posts published recently that distill the information from the W3C about how the guidelines and principles of WCAG 2.0 apply to mobile devices.

I thought it would be useful to have a single post with links to each of the previous posts. The posts take the 4 POUR principles and explain what they mean in terms of mobile application.

POUR

Mobile Accessibility and the Robust Principle

Mobile Accessibility and the Robust Principle

The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.

In this post I will distill the W3C information on the Robust principle.

The Keyboard

Set the virtual keyboard to the type of data entry required.

Data Entry

Make data entry as easy as possible by,

  • On-screen keyboard
  • Bluetooth keyboard
  • Speech or Touch
  • Use select menus, radio buttons, check boxes or automatically enter known information (e.g. date, time, location)

Support the Platform

Don’t disable the device’s platform characteristics such as zoom, larger fonts, and captions.

Mobile device image: William Hook