Web Literacy Ninja – Part 5

Welcome to the fifth installment in the Web Literacy Ninja series!
Today for the Design and Accessibility part of the WebLit map, I would like to talk about an aspect of Design and Accessibility that is very dear to me. That is, designing for visually impaired people. My mom’s has impaired sight so she’s really troubled when a site has fonts/icons that are too small to see or the graphics aren’t quite arranged in a friendly manner for the visually impaired. I’ve been reading up quite a lot about it myself.
Often it’s just a matter of choosing the right icons, fonts and font size and combination of colors on the page.
In my blogs I always make sure to choose a template that is friendly for visually impaired people.
Usually blog templates can be tweaked using WYISIWYG editors so the user doesn’t actually interact with the code, but knowing your way around HTML and CSS might prove useful.

To get started with HMTL and CSS take a look at some cool resources from Webmaker:

You might want to do a research of your own the Web Literacy Mapper, keywords HTML, CSS. Another resource to try is Codecademy‘s HTML/CSS track.

Steve Krug’s Dont’ Make Me Think was an inspiring read on Design and Accessibility.
If you want to delve deeper you can browse The Smashing Magazine and A Book Apart websites. The Smashing Books ebook series is a nice enough read to get you started.

A very nice resource to make websites friendly for the visually impaired people on the go is Mozilla’s Access Firefox collection of tools.

Also, it might be a little too technical for newbies, but why not take a look at W3C Introduction to Web Accessibility?

what's this stuff?


Choose your web browser!

Choose your Web Browser!

This is a spin-off in my Web Literacy Ninja series. It falls back into the Exploring category of the Web Literacy Map. It’s an idea I adapted from the Webmaking 101 – Choose your Weapon challenge on P2PU.

a collage of browser screenshotA bit of background

A web browser is a software application for retrieving, presenting and traversing information resources on the World Wide Web.
An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. From Wikipedia

History of web browser

The first web browser was invented in 1990 by Sir Tim Berners-Lee. It was called WorldWideWeb.
In 1993, browser software was further innovated by Marc Andreessen with the release of Mosaic which made the World Wide Web system easy to use and more accessible to the average person. Andreesen’s browser sparked the internet boom of the 1990s. The introduction of Mosaic in 1993 – one of the first graphical web browsers – led to an explosion in web use. Andreessen, the leader of the Mosaic team at NCSA, soon started his own company, named Netscape, and released the Mosaic-influenced Netscape Navigator in 1994, which quickly became the world’s most popular browser.

mosaic browsernetscape navigatorMicrosoft responded with its Internet Explorer in 1995, also heavily influenced by Mosaic, initiating the industry’s first browser war. Bundled with Windows, Internet Explorer gained dominance in the web browser market; Internet Explorer usage share peaked by 2002.
Opera debuted in 1996; it has never achieved widespread use but Opera-mini version had more fortune, focusing on the fast-growing mobile phone web browser market and being preinstalled on over 40 million phones.
In 1998, Netscape launched the Mozilla Foundation in an attempt to produce a competitive browser using the open source software model. That browser evolved into Firefox.
Apple Safari had its first beta release in January 2003; as of April 2011, it had a dominant share of Apple-based web browsing, accounting for just over 7% of the entire browser market.

apple safari

The most recent major entrant to the browser market is Google Chrome, first released in September 2008. Chrome user-base continued to grow and in May 2012, surpassed the usage of all versions of Internet Explorer combined.

google chrome mozilla firefox

Adapted from Wikipedia article Web browser.
See also History of the web browser and List of web browsers.

Choose your browser!

Some of these have also a mobile version.

  • On iOS (Apple devices)
    • Safari
    • Chrome
    • Opera Mini
  • On Android
    • Chrome
    • Opera Mini
    • Firefox
  • On Windows mobile
    • IE Mobile
    • Chrome
    • Firefox
    • Opera Mini

You might want to try out different browsers and find one that suit your needs! 😉

Get comfy with your browser of choice

Once you’ve chosen the browser that is better suited for you, go on and tweak the Preferences to your liking. Don’t forget to look into the Privacy and Security options of your browser to protect yourself from prying eyes. 🙂

firefox privacy settings 2

Web Literacy Ninja – Part 4

This is the fourth installment in my series of posts for the Web Literacy Ninja badge.
Today’s focus is on Building and I’m tackling the Composing for the Web and Remixing steps in Mozilla’s Web Literacy Map.


I’ve started building hypertexts using the HTML markup language back in 1998, at age 13.
I wrote simple snippets of code in HTML 1.1 for study purposes but I also used a WYSIWYG program for more complex stuff.
The program I used back then to compile hypertexts was Netscape Composer, which came in a suite with Netscape’s browser Communicator (Mozilla’s Firefox grandpa). Some years later I experimented with graphics, too, using a program called GoLive.
My first website was published around the same time on Yahoo’s Geocities spaces. It looked quite different from today’s sites.
My old site is not around anymore. I closed it around 2009 when I opened my first blog on Blogger.
Nowadays I use blogs as platforms (I have several) and I focus mainly on content, but I’m still tinkering around with code, mainly on the Mozilla Webmaker community, P2PU and Codecademy.
Here is my profile page on Webmaker with some of my makes and remixes: https://sw3etvalent1ina.makes.org/.


A snapshot from A Little About Me remix on Webmaker

On my webmaking101 series you’ll find relevant content for the Composing step of the Building module. I’ll list some of the most useful here:

These are some of the sketches I use when prototyiping a new website (sorry it’s in Italian; that’s a sketch I actually used when prototyping for a multi-user blog project I tackled last year):

website prototype sketch 1

Website Content

website prototype sketch 2: colors

Website Color palettes


As for remixing, I use mainly the resources on Mozilla Webmaker. Here are some remixes I did for the Explorer badge and a teaching kit I translated into my own language (Italian):

Plus two bonus links: A Little About Me and I Believe in an Open Web. 😉

And a video I made with Popcorn in which we learn how to use CC Licenses!

Let’s Learn CC!

Web Literacy Ninja – Part 3

This is the third post in my Web Literacy Ninja series. Click here for the first one and here for the second one.

Today we talk about Credibility and Security, the last two categories that fall under the Exploring set of skills in the Web Literacy Map. As stated in Mozilla’s Map:

Critically evaluating information found on the web

  • Making judgments based on technical and design characteristics to assess the credibility of information
  • Researching authorship and ownership of websites and their content
  • Comparing information from a number of sources to judge the trustworthiness of content
  • Discriminating between ‘original’ and derivative web content

I’ve been on the web since 1998, when dad installed the first analogic modem on our home computer. I was thirteen back then. Ever since then I’ve been continuously studying the ways web works, tinkering with HTML and maintaining a site of my own. In 2008 I closed my old run-down website, though and transferred all my activities on blogging platforms.

I don’t know if I can call it a skill or rather a mind-set, but in the years I have acquired the ability to swiftly process and valuate info I find on the web so that when I’m making a search I can quickly discriminate sources and isolate those that are more strictly related to my search. Though now Google does that for me right from the omnibox and it’s quite adept at it, I must say.

I learned to trust my insticts, yet stay skeptical and always evaluate info and the trustwortiness of sources.


  • Keeping systems, identities, and content safe
  • Detecting online scams and ‘phishing’ by employing recognized tools and techniques
  • Encrypting data and communications using software and add-ons
  • Changing the default behavior of websites, add-ons and extensions to make web browsing more secure

Actually, I think I have most of these operations authomatized by tweaking the preferences of my web browsers to suit my needs.

These are the settings I use on Mozilla Firefox (note that the browser is set by default on my mother tongue, Italian):

firefox privacy settings

firefox privacy settings 2

And these are the settings I use on Google Chrome:

google chrome settings

Chrome settings, too, can be further tweaked for heightened security. And both browsers offer anonimous navigation functionality. I don’t use it, though, since I make extensive use of social networking and I like to have my password memorized for swifter log-ins.

Web Literacy Ninja – Part 2

This is the second post in the series of posts for the Web Literacy Ninja badge on P2PU.

Today we talk about Search.

I guess I’ll just go with a demonstration of how I do a web search.
Let’s just say I want to know more about Cut the Rope, the popular game from Zeptolab.

I go to Google » Search » cut the rope (actually Google automatically fills the box with “rope” if I just digit “cut the”).

Press Enter » Results page. I get 67.900.000 results but the one I’m interested in is the first one at the top of the page (yep, Google is, indeed, smart) » Cut the Rope games, Om Nom and Nommies Official Website.

For now I just wanna visit the official website, learn more about the game, maybe watch a preview, look for goodies.

But let’s say I wanna see some images from Google Images. I go back to the search results page and click on the second link at the top of the page » Immagini relative a cut the rope. » Now, that’s a whole lot of Om Noms out there! (I really like Om Nom)

om nom

What if I wanna see some videos of Om Nom crunching candies? I’m already on the search results page on Google. I select video from the list of search tools. My, there are a lot of videos! The first one at the top of the page is a trailer from IGN. That’s good, I’m trying to figure out if I wanna play the game and a trailer is exactly what I need! » Cut the Rope Trailer – YouTube

What if I wanna shop Cut the Rope goods? Maybe a Om Nom plushie? Let’s click on the Shopping link in the search options. Great! Google displays a list of goods and yes! there are Om Nom plushies too! So cute! ❤

By the way, this is my very own Om Nom plush! Isn’t it so cute?

my own Om Nom

But what if I want to read some news about Om Nom&Co.? Let’s hit the News link! Well…that’s not really helpful. (^_^’)

I could refine my search but I’m already fed up with candies — ops, sorry! Cut the Rope.

Of course this is a generic research about a game, so Google is more than enough to meet my needs.

Of course I could refine my research more and/or use other search engines, but I don’t really need to do it for Cut the Rope.

Anyway, I always start from Google because it’s a very powerful and flexible search engine.