Building up HTML Skill

Normally, I do not spend a lot of my time using HTML or CSS, but I got a little caught up in reading on UX blogs and discussion forums about how web designers and UX professionals should or should not be required to know how to “code”. One person asked why they kept getting applications from UX designers who did not “code” (i.e., design from scratch with HTML, CSS, JavaScript, etc.) their own portfolio site. Those applications, according to the original poster, were apparently not good enough because he wanted someone who could design their own site rather than use a WordPress template or theme.

Much of the debate, which I won’t go into now, had to do with whether or not this type of UX person exists – some said this person is a mythical “unicorn” and the poster would be better off looking for UX designers who had a better grasp of psychology (which is also true). My question, and one of my arguments against this UX People Must Code, is that it does not specify the degree to which a (web-based) UX specialist should understand code. (And really, what they’re specifically talking about is HTML/CSS, not Java or .NET.)

I was curious: how much should a UX person learn about HTML/CSS and how fast can they do it? Well, in my own experience, I’ve found that spending a dedicated but serious amount of time learning something difficult (Russian, OpenFrameworks, driving) will not likely get you to mastery, but it will get you somewhere. I wondered if a UX designer dedicated, say, a month of time learning about HTML/CSS would that get them “far enough”?

I typed into my trusty Google search box “learn HTML in 30 days”…and voila! I came across a great website called TutsPlus.com. This site offers tutorials on all kinds of creative and design related topics, included web design and development. Web Development is actually on a sub-site, called webdesign.tutsplus.com. Turns out someone has already created a 30 day tutorial to learn HTML and CSS. And it’s FREE!

Checking it out, and skipping ahead, I was pretty impressed by this tutorial. I like movies and I love learning via video. The tutorial eventually has the pupil try to skin and recreate a website from a PS template. I became inspired to try something similar. Except I didn’t use a template. I used a page from a real website. It was an Etsy tutorial on how to sew a skirt. (I did make my own skirt, eventually, too.)

I’m still working on it, but I’m over halfway finished. The sidebar is a little bit tricky, so I’m taking a break. I’m using the 960.gs grid in 16-columns, and a few HTML5 tags. There’s not much need for CSS3 yet, but I think some of the buttons will need some styling for gradients and corners. It’s been fun, but I’m not sure I’d want to do it everyday. (Maybe, though…if I had more practice.)

*****

The funny part, is that the part of my brain that is working hard to format an HTML page and troubleshoot what could be going wrong with the CSS does not feel like the same part of my brain that comes up with UX inspirations and designs, and makes the associations between how a person would use a system with what the system offers. More on the Coding Designer later. For now, here’s a screenshot of my sample Etsy project and the real Etsy webpage. There’s still quite a lot of tweaking left to do, but you can see how it’s coming together.

My version of an Etsy webpage
My version of an Etsy webpage
Etsy.com Sew a skirt in an hour
Etsy.com Sew a skirt in an hour

Using Arduino and Processing together

Today I got up early and fooled around in Processing…for hours. I was playing with the Minim sound library, which I’d planned to use for my Intro to Computing Media project, an mp3 player. After sitting around for so long, I could how I was getting both noticeably older in age, but also wiser about Minim. Why sit around and program something completely different when I could put the two together? Well, my fear with combing my two projects, ICM and PhysComp, was that I’d skimp out on one or the other and not fully challenge myself. However, due to the MEX conference – to be blogged about soon! – my schedule is shorter than I’d like. Something’s gotta give. Sadly, it’ll have to be a little bit here and there on my projects.

Anyway, today, I worked on combining my Arduino code and my Processing code using serial output to play a song. Before discussing this, a little recap:

Create the code to turn on/off LEDs set at a threshold. Using the map() function and an if/else statement, I can now reliably turn off and on an LED as though it were a switch.
Here’s the code for the mapping and if/else statement part:

phoVal1 = analogRead(phoPin1);
  //map the photocell values and turn on the light
  phoVal1 = map(phoVal1, 0, 255, 255, 0);
  if (phoVal1>=0) {
    digitalWrite(pholed1,HIGH);
  }
  else{
    digitalWrite(pholed1,LOW);
  }

Here’s the code for the FSR:

FSRValue = analogRead(analogFSR); // read the left FSR value
  analogWrite(motorpin, FSRValue/4);

The next step was to combine this code with the Minim library in Processing. But first, write code in Processing! Here is where several hours with Minim came in handy. I was able to hobble together enough code to be able to play and pause a song. I haven’t yet created any arrays, for a media list, but that’s next, as well as the ability to move through the array. After that I sent the output in serial DEC to Processing. I just added this little bit of code:

if (xpos > 100){
 song.play();

After that, I was able to use the serial output from the FSR and Photocell to trigger the song.play(); function. I suppose, I could find a audio visualization program to tweak, so that I can make a pretty picture show when a song plays, assuming I play a song.

Next I’ll need to refine all the code, and plan out more of how I want the sensors to interact with the plants. And, I need to get some plants.

UPDATE: Code is not working as expected. Processing is just playing a song when the sketch is run. I need to figure this out some more.