Designing for humans is important. Often times we are afraid to interrogate human characteristics into our design and use of technology. We forget that technology is an extension of ourselves. The more we understand this, the more we can use and design technology/the internet/websites as exoskeletons of our minds and relationships. I believe we need to use technology to express our vulnerable, transparent, and honest selves (to whatever extent we feel comfortable doing so.) In doing this we can design the web in ways that promote values over impulses. One simple start to designing for human-centered-purposes is integrating art with our websites. This can certainly be tricky especially when using websites for professional and academic purposes but in this context (a personal website, web design class, experimenting) I thought it would be appropriate. I wanted to change the background of my site (at least the index) to have something that wasn’t so boring (i.e. plain white background.) I decided to use an artwork that I contributed in producing along with other human and non-human authors. I had no idea how to add a background image/pattern and so I asked the interwebs (via duckduckgo.) The code I found was on https://www.w3schools.com/tags/att_body_background.asp
So I used this code. It didn’t work! After about an hour of trying small things to get it to work (made sure all letters were lowercase, triple checked the code, made sure the picture was saved as jpg) I finally realized that it was not coming up because I never transferred the photo from the images folder on my wd folder to the public html. So I did this. But. Still. Nothing. What the hell! Finally I looked back at my sandbox image code and realized that there was “images/” before the picture title. Once I entered images in front of the title (<body background= “images/picture with color.jpg” >) it finally worked! Wow. I was not thinking.
The art I used was a picture I took on my phone. I then corrupted (4 artistic purposes #_# ) the file on my computer, and lastly converted it to a jpeg (because this was the format I was familiar with from our work in the sandbox.) I like the way it looked but this specific pattern/color/style would definitely distract visitors on my website (which for now is going to be used for primarily academic and professional purposes.) And so I will probably remove it soon and use something less aesthetically “noisy.”
Lastly (for fun) I decided to mess around with some text colors/styles. I attempted to make text “blur” using this code from http://www.registerednursern.com/cool-html-codes-animations-text-effects-marquees-backgrounds/#html-text :
<TABLE STYLE=”filter:blur(color=black, strength=5)”> <TR><TD><center> <b><font color=”#FF0000″>Put Your Text Here!</font></b></TABLE>
It did not really make the text blur, however it did help change the color as you can see it is a nice light green shade.
I also tried to make text move. I used the code
<marquee onMouseover=”this.scrollAmount=2″ onMouseout=”this.scrollAmount=8″ height=”34″ width=”713″>Put Your Cursor over these Words & See what happens!!!!</marquee>
It’s a picture here so it’s not moving but go to michaelgfarrell.com and you’ll see. *_*