Friday, February 26, 2010

HTML

Day 9/150

Today I'm thinking about Fundamentals of Web Design. People who are not web designers hope I will tell them that they can be web designers or develop content for the web without knowing HTML. Here's what a great HTML tutorial I found has to say about that:
"HTML is used to create web pages. No web designer or web developer can do their job without knowing at least some HTML. At the same time, the language is absolutely essential to people who are creating their first webpage or taking their business online." http://www.htmlprimer.com/
Fortunately, there is probably no subject more well documented on the web than that of how to create web pages:
For a preview of an upcoming subject...
The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot. 

Thursday, February 25, 2010

New Nikon 50mm Lens

Day 7/150

DSC_4298

Today I was excited to receive my new Nikon AF 50mm 1.8 D lens from Amazon. Hurray for Amazon Prime! So, took the shots of the pets because I always do when I get new gear. They can't say no and they don't run from cameras the way people do. It is hard to get them to smile on cue, though. After that I wanted to see what the DOF was like and make sure it was sharp, so I hit Big Dog and Eeyore with the SB-900 with the diffuser from a few feet away to the left. Later, on a lark, I shot the same composition with my other two lenses for comparison. It's good to know what your equipment.


It's not a perfect test. Shots (A) and (B) are the 50mm at f1.8 and f2.2 respectively, both at 200 ISO. Then I shot (C) with the AF-S 24-120mm kit lens at f4.8, set to 50mm. Last I shot (D), the old AF 70-210mm at f4. Both of the later shots were at 3200 ISO and I think I got some noise reduction artifacts in them.



DSC_4319

The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot. 

How Does the Web Work?

Day 7/150

For a class on the Fundamentals of Web Design I'm planning to teach at the Kalamazoo Institute of Arts, I shall begin with a presentation about how the web works. The way the web works has a big influence on how a designer will compose a web page. I believe such knowledge should be among the few dominate considerations for any conscientious designer. It is step one in learning to design web site; first understand the environment where your creation will be displayed.

A survey of web sites that attempt to answer this question, a complication like this can be formulated:
  1. There is a difference between the Internet and the Web.
  2. The Internet is the catch-all word used to describe the massive world-wide network of computers. The word "internet" literally means interconnected networks, a network of networks.
  3. The World Wide Web, (or simply the Web) refers to the portion of the Internet that is the collection of thousands of web servers and clients using HTTP to communicate and the huge amount of information available using the same protocol.
  4. Nobody "owns" the Internet - although there are companies that help manage different parts of the networks that tie everything together, there is no single governing body that controls what happens on the Internet.
  5. The Web is sometimes referred to as a client-server system. Your computer is the client; the remote computers that store electronic files are the servers. Web software is designed around a distributed client-server architecture.
  6. A Web client (called a Web browser if it is intended for interactive use) is a program which can send requests for documents to any Web server. 
  7. A Web server is a program that, upon receipt of a request, sends the document requested (or an error message if appropriate) back to the requesting client.
  8. It is important to note that every web page on the Internet  has its own unique web address, known as a Universal Resource Locator (or URL).
  9. A DNS server is an index of domain names and their corresponding IP address, the numerical location of the web server on the Internet.
  10. A HTTP client (web browser) send a request, which is routed through the Internet to the address of web host for the domain.
  11. The web server responds to the request with either an error message or the HTML formatted document
  12. HTML is a text-based string, which is interpreted by the web browser, and presented to the user
So, to publish a document on the web you need to acquire several things:
  1. web host: you will rent space on a computer that is configured to respond to requests from web clients (browsers).
  2. domain: the web host comes with an IP address, because all computers connected to the Internet must have an address - you will register a name to be listed with the corresponding IP address
  3. dns server: this service is provided by your web host, your domain registrar, or an independent service and lists your web site's domain name and IP address for Internet routers.
My index of web sites that answer this question:

Tuesday, February 23, 2010

Back to Basic Black & White

Day 6/150

I got some more done on completing the Basic Black and White design tutorial with adaptations for my own web site. I didn't like the swoopy thing, so I just made a centered medallion for my logo.


I hadn't noticed the link for the social media icons from the tutorial until I reached that part of the process: Clean, Crisp Social Networking Icons

The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot. 

Friday, February 19, 2010

Web Design: Twitter Background

Day 5/150

Web site design can be boiled down to basic elements. It's a little too elementary to say that a web design can be reduced to background, masthead, navigation and typography, but it certainly is a good first-order starting point.

As an elemental property of web design, a good focus for study in web design is the subject of backgrounds. For some applications, especially social media web sites, customization is quite limited, but often one of the changes you can make is to the background.

There are quite a few online tutorials about creating web site backgrounds. One roundup I looked at today have 40 different tutorials listed.

I chose the Quickly Build an Abstract Background of Colored Bars article. I wanted to create a new background for my Twitter page. To accommodate tiling, I applied the motion blur effect several times to ensure the streaks went all the way across the image and stopped following the steps after applying an enhancement, which in my case was a hue/saturation layer. My result:


I used a 1024x768 document size, but the one that Rachel Maddow uses on her Twitter page is made at 1348x200 pixels. 

The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot. 

Web Design: Seeing

Day 4/150

For the class I am planning to teach at the Kalamazoo Institute of Arts in March today I looked at artist web sites. The class is "Intro to Web Design" and the objective of the class is help the students display their artwork on the web. To start we will look at the web sites that other artists have created to show their work, and the best start is to review the best of the sites that instructors at the KIA have put up.


  1. http://www.marywhalen.com
  2. http://www.randywalker-art.com/WELCOME.html
  3. http://www.vickivanameyden.com/
  4. http://www.megtang.com/Home.html
  5. http://www.multiplicityjewelry.com/
  6. http://www.melodyallen.com/
The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot. 

Thursday, February 18, 2010

Social Media: The New Social

Day 3/150

I gave my presentation today at Portage Senior Center and so today's post is about that. I seem to have gone some good distance in succeeding to deconstruct social media in a way that seniors can get their heads around it, and which does address some of their anxiety.


In particular, I liked this series of the slides:


Social media *is* socially interesting, and it *is* technologically boring, however much news reports and geeks like to talk about it as though it's new, and fancy and complicated.


Social media are all just web sites, like any other. They appear in a web browser and you get around in them by clicking on links.

 

There's no real technical difference between the Facebook web site and the CNN web site. The difference is that you probably didn't write the stuff that shows up on the CNN web site.


If you've ever done a search on Google or shopped online and entered your address and pressed the "Submit" button then you've already mastered all the skills you need. Every social media web site boils down to filling out a web form on the web.


Flickr has a form. Instead of a message as such you tell the form the location of the photo file on your computer.

 

YouTube has a form. Like Flickr, you tell the form the location of the file, in this case a video file, and then add some information about that file, which will enhance and enrich the post.


Facebook has a shorter form, but there it is. You add your status message and click the submit button.


Social media grew out of "blogging", (blog is short for "web log") which became popular when services like Blogger.com first made publishing on the web just a matter of filling out a web form. Blogger, and other services like it, made it so you didn't have to have any technical knowledge to publish a web page. The blog pedigree is apparent in social media, and is the first essential ingredient in what me generally regard as a social media web site.


Once you click the submit button, there isn't really anything magical about what happens next. The web site just stores the information and displays it back to you and others who visit the site. Blogs present posts in reverse chronological order. But with a something that's just a blog you don't have the social factor -- all the posts displayed at a blog are by an author, or a set of authors defined by someone else. Your choices are really to either visit the blog web site or not to visit the blog web site.


Social media web sites allow you to select whose posts get displayed together. You're picking a bouquet of authors and their posts will appear in an arrangement especially created for you. This process of selecting authors, usually people you know, is the social element of social media. Social media is the ease of blogging combined with a subscription model, resulting in a reverse chronological display of content.


If you isolate the display area from all the distracting stuff around it, you can see that this is true, especially with Twitter. I've picked some people to follow. Their posts (made using the simple form) appear here on my display of the Twitter web site. Like a blog they are arranged in reverse chronological order. The image that each of the people I follow selected to associate with their profile appears next to their posts. Their user names appear at the start of their posts, and if I want to see all the recent posts by just that author (a la a blog-like display) I can just click on their name.


The presentation was generally well received. The feedback featured the word "informative" heavily, which could indicate that it was a bit long, which it certainly was, but that's why I brought cake. Questions are always a good indication of what was missing from the presentation. The questions I got were "How long does the stuff I post on Facebook stay on the web?" and "Can you delete your Facebook account after you've created it?" I hadn't thought to cover either of those subjects. I did notice they were keenly interested in my contrast and comparison of the social mechanisms in Facebook and Twitter, that with Twitter anyone can follow you without obtaining your permission, but on Facebook you have to explicitly authorize someone to become your friend.


I took a survey of sorts at the start of the presentation. There were 17 participants. The audience was divided evenly between owners of laptop computers and desktop computers. Everyone had a cell phone. None of them knew whether or not they had data plans. Two were sure they had SMS messaging, but didn't speak up until I said "text messaging" rather than SMS. AT&T was the preferred network by 2 to 1. One person used GMail. All but three people had digital cameras or phones that could take pictures. Only two people had a way to capture digital video.

The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot. 

Wednesday, February 17, 2010

Photoshop: Web Design

Day 2/150

To copy is to learn, and so I am in favor of following tutorials. Today I started on a web design tutorial called "Simplistic Black and White Portfolio Layout in Photoshop." Here's where I got.

 

So far I think there are a few particularly useful tidbits.
  1. Free cool new font for me: Creampuff
  2. Set of icons for web sites, in vector, yea! Downloading free icons and pictograms
  3. The use of gradient overlay layer style for text. I think that's cool.
The "150 Days" series is a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer as part of my career reboot.

Monday, February 15, 2010

Photoshop: Crumpled Paper Effect

Day 1/150

Followed this tutorial to create a crumpled paper background suitable for use on a web site or slide presentation background.





The key notes I would make to highlight the technique:
  1. Use a black-to-white, diamond gradient with the gradient mode set to difference and draw a bunch of random gradient diamonds on a new layer
  2. Apply the emboss filter
  3. Remember to adjust the levels afterward to get the paper back to white (a step not covered in the tutorial)
I didn't like how the turorial created the edges, so I would try some other method. My result:



This "150 Days" series is to be a post-per-day review of design topics to help me brush up on skills and become a better designer and new media producer.