In the U.S., a 14 year-old boy from Indiana won the National Spelling Bee. He correctly spelled the word AUTOCHTHONOUS. It means ‘native to a land’ or ‘indigenous,’ and in Spanish the word is ‘autóctono.’

Are you aware that there is no such thing as a Spelling Bee in Spanish-speaking countries ? This of course makes sense because in Spanish we pronounce nearly every letter in each word.

There are exceptions to this rule, however. For example, in the word águila (eagle), the ‘u’ is not pronounced. The ‘u’ is not pronounced if it comes both after ‘g’ or ‘q’ and before ‘e’ or ‘i’. So the combinations ‘gui’ or ‘gue,’ as well as ‘qui’ or ‘que’ are pronounced as if the ‘u’ were missing.

If the ‘u’ should be pronounced in a word, two little dots (called a dieresis) are placed over the u: ”ü” (e.g. lingüista, vergüenza).

In Spanish, many rules and exceptions exist for proper pronunciation of words. An argument among Spanish language aficionados criticizes such exceptions and calls for reform of the Spanish language.

For example, the words tasa (rate) and pasa (pass) are spelled similarly but never confused. This is because the initial ‘t’ and ‘p’ are completely different phonetic sounds.

On the other hand, tasa (with an ’s’ means rate) and taza (with a ‘z’ means cup) are pronounced exactly the same but they mean completely different things!

Another example, for instance: the letters ‘v’ and ‘b’ are pronounced exactly the same in Spanish. Why, the question remains, should a language have separate letters for the same sound?

We do not know how this reform proposal is going to end, bit it seems to be an interesting conversation piece. Keep in mind that many Spanish language purists believe that reforming this established language is not necessary. Although there are no spelling bees for Spanish words, maybe there should be considering the various exceptions to the spelling and pronunciation rules… at least until this reform happens.

Does it seem to you that there are hardly any terms in Spanish for the Internet? To attempt an answer, we have to review a brief history of the Internet.

Have you ever wondered how the whole World Wide Web got started? The small space in this newsletter is not enough room to discuss the  history of the Internet. [Update: The Internet Society has a list of documents that discuss the histories here.] But, to get a brief, very general idea, here is a tip of the iceberg of the events.

In 1957, the Soviet Union launched Sputnik I, the first man-made, artificial, earth satellite. This was a first for global communications. Not to be outdone, then-president Eisenhower ordered the creation of agencies for the U.S. to advance technologies in space, weapons, and communication.

In 1958, the United States formed ARPA (now DARPA, Defense Advance Research Project Agency) and NASA (National Aeronautics and
Space Administration). As the years passed, ARPA created and tested several methods of communication. The systems improved with each passing year.

By 1971, it was possible to send electronic messages over an established interconnected network of servers. In 1972, the @ symbol was used to differentiate the receiver (user) from the server or level (network): user@server.second.net. The modern e-mail was born.

Eventually, browsers and their program language HTML (Hypertext Markup Language) were develop. Advances continue to this day.

Since the idea for the Internet surfaced in the United States, most of the basic terminology is and remains in English. As the globalization of the Internet occurs and ownership of this “cyberspace” expands, each culture begins to adopt the terms in their own language.

Browsers, ISPs, and e-mail programs now come in almost any language you want to use. As these changes take place, familiarize yourself with some of the frequent terms and phrases.

Some of the pages you may have visited recently offer a Spanish counterpart. For example, MSN offers a Latino counterpart in Spanish at http://latino.msn.com/. Yahoo! has http://espanol.yahoo.com/. In your leisure time, explore the Internet to enhance your Spanish experience.

With over 30 countries in this count, differences do arise. As unique cultures come to know each other, an interesting exchange happens. In Peru, for example, the term “chompa” is used to describe a jacket. Here in Texas, we are accustomed to using “chaqueta.” When it comes down to it, “chaqaeta” derives from “jacket” just as “chompa” derives from “jumper.” Náhuatl is the indigenous language in Mexico, and several words have adapted to the Spanish language. “Peanuts” for example are known as “cacahuates,” but throughout South America they are called “maní.”

In the United States, we are seeing a use of the Spanish language from both families that have roots here and families that are newly arrived. Along the Mexico-U.S. border region, the culture is very much bilingual… even to the point that many people speak what has been coined “Spanglish.”

This fascinates ethnographers and linguists. No other modern cultures show what is called “code switching.” Some of us are very comfortable speaking in Spanish and then changing to English and back again… in smooth transitions. In the 80s, I remember a commercial aired on a Spanish network that poked fun of this. The comedian was confused about learning English because “amarillo” is yellow, “hielo” is ice, and eyes are “ojos”!

We all have a lot to learn about the diverse Spanish language. The trick is to not get caught up or stressed out with any of the confusion. Immerse yourself in Spanish and learn about the different cultures that speak it. The more time you take to do so, the easier and more comfortable speaking it will become.

Can you guess the top five countries of the world by population in which Spanish is the most widely spoken language? [This question was part of a contest for the newsletter. The answers according to Ethnologue and InfoPlease back then were: 1) Mexico 2) Colombia 3) Atgentina 4) Spain and 5) United States.]

A visual representation of words. Or, as it says on the website, it is “a toy for generating ‘word clouds’ from text that you provide.”

There’s more that you can do now, but—when I found the site—all you had to do was upload some text and the Java applet creates a visual representation of the text. The words that repeat often are more prominent than those that do not. You can also edit the font style, colors, and layout of the final “cloud.”

When looking at MY jumbled cloud of words, the most prominent are ONLINE and TEXAS. This intrigued me because I am a visual person. Also, I am looking for a job the Internet industry in Texas, so it appears that I am focusing the repetition of those words properly (indicated by their size in this wordle).

I created this particular wordle of my résumé more than six months ago. Now, the site seems to have more options to customize the weights of certain words or phrases and to apply certain HEX colors to them. Visit wordle.net to create your own!

The 5D Methodology Cycle

In fact, I discovered that I have actually re-created those five steps from a methodology I learned while working as a business analyst. The process or the idea of it clicked so well with me that I hadn’t realized how much I incorporated into my own work. From academic research to corporate presentations, I started adapting that corporate methodology into my own steps.

These are the tenets of the 5D Methodology (paired with my own “label” for the process):

1. Define = gather information: learn as much as you can about the project and deliverables
2. Discover = get inspired: look to other sites, books, images, or listen to music, or draw!
3. Design = begin designing: sketch as much as you can then mock up as much as you can
4. Develop = code the monster: lots o’ coffee and typing away at the laptop “ivories”
5. Deploy = upload to the server: work the magic!

Now software development, I understand, has several methodologies that fit a general pattern. Some are FOUR Ds, some are FIVE Ds, some are agile, some are not… but they all are a basic structure to create a work. Each person adapts a plan of action for his or her work; thus, each working environment employs an action plan that works for the team.

For me, this method works well whether I’m doing a web site, creating a dance choreography, or working on an art project.

• Make a list of items you need to upload.
• Log in to the FTP service
• Upload all files
• Test the live site

Make a list of items you need to upload.

I make a list of all the files I need to upload, and this is the general order I plan to upload so that I have all the supporting files first before the HTML that displays the page.

1. All media files (images, video, flash, etc.)
2. All design and interaction files (i.e., .css and .js files)
3. Content for secondary and tertiary or lower pages (HTML file for linked pages)
4. Content for primary page (HTML file for the home page)

I usually leave open in my editor every source file I create or edit for the project. Within each of the tabs, I can see which images I’m referring to so I can see which images need updating.

Tabs in Notepad++ (1 CSS file and 3 html files) show which files I worked on that need uploading.

Log in to the FTP service

Normally, I use either of two services to upload files via FTP. The FireFTP plugin for Firefox is one of the primary ways I upload my files.

FireFTP plugin tool for Firefox

The other is an Internet portal from my host DreamHost, WebFTP.

WebFTP service from DreamHost

Upload all files

So now you can start uploading all your files in the order stated above: (1) media files, (2) design and interaction files, (3) content for secondary pages, and finally (4) content for home page. The home page is the users first view of your work: their first impression, their gateway into more information, the first interaction. Why upload that first if you wouldn’t have the rest to support it. That’s why you should upload all your supporting files first then the home page should always be last.

Test the live site

Once the uploads are complete, grab the checklist you made while coding and make sure they those things also work on the live site.

So these are the five steps I took when working on my portfolio site (if a bit simplified). These are the steps I normally take on a project. In putting these articles together, though, I’ve come to the realization that I’m mimicking a methodology I learned from my work as an ecommerce business analyst. More on that later.

In my notebook, I rough sketch some initial HTML code.

Notice my note: “Sidebar is only for home page.” I make little reminders like that all over my notebooks.

You can also see some sketches for the About Me page along the bottom. Apparently, I liked the layout of the third one since there is a star drawn on it. I haven’t gotten to create this design yet as of this posting (April 8, 2009) because I can’t find a good landscape picture of me. I know the one that’s on the site now looks like a mugshot!

So my workstation consists of my laptop, my notebook full of sketches / scribblings, and a cup of coffee. As I mentioned in the article on free tools, I set my Pandora station to the type of music that I think “goes” with the design. Because this was my personal project, I listened to my 80s music like Duran Duran, INXS, OMD, Real Life, etc. On my desktop, I have Notepad++ opened to a blank HTML document tab and a blank CSS document tab. Then I use Firefox to check out my updates as I change the coding.

And then it’s a series of typing XHTML, typing CSS, F5 refresh in the browser, XHTML, CSS, F5, HTML, CSS… you get the idea. Then I smile at a job well done when it all works well. Or investigate why the hell that sidebar div won’t line up to the footer! But that’s just me.

Once I reach a point that I’m comfortable with the design code, I’ll open the other browsers that I test with to make sure the site doesn’t break in them: Internet Explorer, Opera, Safari for Windows, and Chrome. (Yes, you might have guessed that I work on a PC. I haven’t the budget or energy to get a Mac, right now. I will some day.) I’m sure there is a way to test my site on the Safari browser on the iPhone, but I haven”t looked into it.

After I get all the coding done, I make a checklist to follow as I test the site on my laptop. I test all the important links to make sure everything is linking incorrectly among all the pages. I use this same checklist on the live site, but that is the next step: uploading to the server.

In my notebook, I sketch a rough idea for the design.

Of course, it never comes out perfectly on the first try. At least not for me. Maybe it’s the rookie in me but I scratch up my notebook paper repeatedly until I really like what I see. I have to be convinced that what I draw on paper is what I want to spend time making come alive using XHTML and CSS. Otherwise—if I don’t like the look and feel—my heart will not be in the coding aspect of it.

Once the drawing is close to what I attribute to “love,” I will typically create a wireframe mockup in either OpenOffice Draw (very similar to Visio, but I don’t have the mula to buy my own license… for now), or even just Powerpoint.

Now for my personal portfolio site, I didn’t create a wireframe. I think that part is more for a milestone to reach with a client. A low- or hi-fidelity wireframe to show a client might be a good step in your process. This way, you can show off your work to communicate how your design direction is going to meet the client’s needs.

Another milestone, perhaps, could be a meeting to show a hi-fidelity prototype, so that that client can view and interact with a more advanced version of the original wireframe. I’m not going into too much detail here about that now because I didn’t use prototypes for my portfolio project.

Now I’m not the greatest when it comes to graphic design. I love sites that look graphically intense, but for my site, I seemed to be leaning toward a more simple structure and design.

GENERAL GUIDANCE

Ultimately, I figured that I wanted my site to be straightforward, have limited graphics, and mainly black & white with very neutral colors.

After establishing the guiding rule, and always keeping the information from the previous article in mind, I looked for inspiration in music, colors, site style, and other sites to help me figure out what I wanted my site to look like. (Note that these are not in any particular order. I shifted back and forth among all these. When it comes to inspiration, I let the creative juices flow naturally.)

MUSIC

Yes, I listen to music while I design. I will typically find music that “goes” with the project. For example, when redesigning a site for a group that organizes Mexican folk dance conferences, I listened to Mexican folk music. Of course, it helps that I have some of that style of music in my library.

If you don’t have much musical variety in your library, I recommend using Pandora, a free subscription site on which you create a “station” of the music or artist you like, and the site plays music that is similar in style. Amazing work there.

For my simple, straightforward site, I chose music from the 80s: I created a radio station in Pandora called ‘The Promise,’ because it is one of my favorite songs from that era. My theory was that pop music in the 80s was very easy to listen to, straightforward, and clean. I might be biased here, but this was my inspiration. In the end, you go with what works for you.

COLORS

For the color scheme I chose: BLACK, WHITE, GREYS, & BURNT MAROON. The black, white, & greys because those colors automatically indicate simplicity to me.

Choosing “burnt maroon” requires a bit of explanation. I needed a color for titles, headlines, and links, so I wanted these to be consistent and needed them to stand out. I got my undergraduate degree from the University of Texas at Austin, whose school color is Burnt Orange. I have family who attended the rival school Texas A&M University, whose school color is Maroon. Ever the harmonizer that I am, I chose a color that fell between these two: burnt maroon.

Final swatches for my site.

STYLE

Around this time, I was also coming across a lot of online articles about using grids to guide a design. Not being a trained designer (something I should have explored as an undergrad), grids were a godsend! I won’t explain it here as it can take a lot of room. I’ll just provide links to some of the articles that I used specifically for my site.

• Grid Computing… and Design
• Designing Grid Systems for Flash
  
• The Funniest Grid You Ever Saw
  

OTHER SITES

And as all my initial research includes, I wanted to see what others in the blog/portfolio world were doing in terms of simplicity and grids. Two that I drew inspiration from include the ones that published the above articles.

Notice their use of whitespace, simple black and white feel, and the grid layout that helps bring a sense of order to their sites.

Subtraction.com Khoi Vinh's Website

Aisle One: Inspiration for Graphic Design

So that was the general gist of stage two for me. The next step is when I sit down and actually begin to draft out the design for my site, combining the efforts of INFORMATION GATHERING and INSPIRATION.

First some disclaimers: Please keep in mind that what I am about to describe is only one of many ways to work down the path of a creative endeavor. Also, these minor essays are intended as short personal studies on methodology and—as such—do not include any explicit instructions in coding. Nor are they meant to be biting diatribes or lengthy ruminations on why the gods created inept web designers. (We are all inept at one time or another.)

Now, as a general rule I try to follow a path toward continued learning and steady research before I get into the actual design and technical aspects of any project. To be honest, I hadn’t realized I followed this path until much reflection in preparation for this series of short entries. (What’s more, it seems I have probably absorbed a methodolgy introduced to me early in my career—more on that later.)

These are the steps as I have labeled them (for now):

1. Gather Information
2. Seek Inspiration
3. Use a Scratch Pad
4. Write the Code
5. Upload the Source Files

Before we begin—no more disclaimers—let me just quickly add here that I found myself playing two roles: that of client AND the other of designer. As a client, I have a message I want to put on the web. As a designer, I need to decipher that message to make the web site into a reality. So this article will refer to me as either I (the Designer) or I (the Client).

Now that the roles are crystal clear, let’s begin.

GATHER INFORMATION

As a designer, my first task is to gather information about what the client wants to do with a portfolio web site. I asked myself that first important question: Why do you want a web site?

ANSWER: My goal was to set up an online space that housed my portfolio, resume, & (eventually) a blog.

The conversation quickly leads to other related questions: What do you want people to do on your site? Which kinds people do you expect to find/use your site?

ANSWERS: I want to be able to point friends, co-workers, potential clients, and future employers to a site where they can see some of my work and get to know me and my thought processes a bit more.

As soon as I (the Designer) obtained solid answers to these initial questions, I (the Client) can begin to explore all the information to put on the site. This curiosity naturally leads to more questions: How much information did I want to share online (privacy issues)? Which work did I want to display online (portfolio)? Then I drew a few boxes on a notepad that indicated information about me, my academic work, my professional work, and some personal projects.

As I studied these four boxes, I realized that three of them were related to work that I had done, which was the beginning of my portfolio.

Plan of action for information

But I also wanted a way for people to contact me, a link to my blog, and a downloadable resume (not necessarly in that order). I drew more boxes.

Adding more boxes to the plan of action

And this is how I structured my portfolio site. It’s not perfect or all-encompassing but it met my original goals. It always comes back to the answer of that proverbial first question. For me it was to set up an online space that housed my portfolio, resume, & (eventually) a blog. And I (as both Designer & Client) feel that this structure met that goal.

I’m sure that later I should need to tweak and reiterate different structures (i.e., “download my resume” could be in the “information about me” section), but for now, I’m happy with this result.

————– UPDATED 5 April 2009 ————–

Here’s an image of the list I found in my notes after the boxes. I think I did this as another way to view the information that would go in the different pages.

—————————-

Up next, another short article on the next step: 2. Seek Inspiration.