Web Designer vs web designer

As an educator and mentor I try to set the expectations of my students. Part of my job is to focus them so they can get the most benefit from the program and have a realistic view of where they will be upon graduation. One way that I do that to help them understand that I’m not preparing them to be “Web Designers.”

Web Designer can be a title. It can also be a skill set. I am a web designer yet my title is Assistant Professor. In addition to my being a web designer I am also an instructional designer. I have worked in industry as a Program Assistant, where I wore many hats. One of the hats I wore in that position was as a web designer. About 30% of my time was allocated to designing and maintaining the program web site.  The rest was distributed across clerical, database maintenance, event planning, desktop support, administration. I want my students to understand that you don’t just bring “one thing” to the table. Web Design is only one tool in the toolbox. My expertise in web design is an asset as an educator.  It makes me more valuable. If students can understand that difference, they can put their learning in context and won’t limit themselves when seeking positions in industry.  Understanding their strengths can give them an edge during an interview.

Browser coordinate system

Student Question:

“I have a question about the box shadows: what if you don’t want the box shadows to appear on the right and bottom of the box? The code that we used (ex. -webkit-box-shadow: 1px 1px 4px black;) doesn’t specify locations. What if, instead, I wanted the shadows to appear on the top and left sections of a box?”

Response:  “As far as the controling the placement of shadow effects… just a guess, try putting in negative numbers and see how that affects it. Remember, the numbers indicated pixel locations.”

“Why are there negative numbers here?”

“Are you asking why I would try a negative number?”

“Yes, I’m asking why using a negative number would be different than using a positive number. This is the only code we’ve seen that can use negative numbers, and I don’t understand why.”

Let’s go into more detail

Do remember the cartesian Coordinate system from High School geometry? http://en.wikipedia.org/wiki/Cartesian_coordinate_system. It is simply a way of representing 3 dimensional space on a 2-D surface.

Think of the browser window as having a x, y, and z axis (actually it does). The x-axis is horizontal. The y-axis is vertical. The z-axis is perpendicular to the window. In geometry we learned that positive numbers are to the right and negative numbers are to the left. A location of any point in the window is relative to a point of origin. The point of origin, i.e. (0,0,0) in a browser window is the upper left-hand corner of the window. Positive X values are to the right. Positive Y values are towards the bottom of the screen. Positive Z values are coming out of the window towards you. Therefore, the negative directions of each axis are in the opposite direction.

In the case of working with drop shadows in CCS3, we use the following syntax…

box-shadow: h-shadow v-shadow blur spread color inset;

where

  • h-shadow is the horizontal distance
  • v-shadow is the vertical distance
  • blur is the blur distance
  • spread is the size of the shadow
  • color is the color of the shadow
  • inset [optional] changes the shadow from an outer shadow to an inner shadow

The distance parameters of the drop (box) shadow are relative to the location of the element that they are affecting. So a 10px distance for h-shadow would be to the right of the element. a v-shadow value of 10px would be under the the element; i.e. towards the bottom of the screen. Consequently, if you use negative numbers, the directions would be in the opposite direction of the relative axis.

Examples:

 

Positive direction ,   box-shadow: 10px 10px 5px #888888;

 

negative direction    box-shadow: -10px -10px 5px #888888;

 

Q&A: Plain text and HTML

Student question:

Is plain text the same as txt? I’m still having a problem with it.

Answer:

Beginning students learning how to code with web standards are sometimes confused about what plain text is and how it applies to HTML.

Plain text refers to simple character set, like ASCII, or Unicode. It is the set of characters that allow us to put alpha-numeric characters on a page. They are the symbols that make up certain languages. ASCII (American Standard Code for Information Interchange) is a character set of  128 characters that make up the English language. Since the web is a global network of documents, the ASCII character set is insufficient to represent many of the languages that use it. That’s why in most HTML documents you find a tag like…

<meta charset=”UTF-8″ />

” (UCS Transformation Format—8-bit[1]) is a variable-width encoding that can represent every character in the Unicode character set. It was designed for backward compatibility with ASCII and to avoid the complications of endianness and byte order marks in UTF-16 and UTF-32.”

Wikipedia

Plain text refers to characters without any regard to formatting; i.e. font, size, color, justification, weight, style, etc. Many applications are capable of reading plain text information. We normally use plain text editors like Notepad (PC) and TextEdit (Mac), vi, or emacs to create the documents so that we don’t introduce formatting codes into our documents. As web designers, we  introduce the formatting into our web documents through Cascading Style Sheets.

When we use a program like Microsoft Word, OpenOffice, Google Write, or a host of other word processing packages, we are putting simple characters onto a page and then use the programs to add the formatting to change the characters appearance. While you normally don’t see the formatting codes that the software uses to make that happen, they are there, in the background, invisible to us. When we format a web page, we see all those codes in the form of HTML and CSS and have minute control over them. It is the browser that takes those codes and uses them to transform the plain text into formatted text.

Plain text files can have more than one extension but usually  have a .txt extension. An HTML document is created using plain text. We create tags with the plain text characters that communicate specific things to a browser. So in HTML you could say that we are giving instructions to a browser (or user agent) using the Unicode plain text character set. The HTML tags, CSS, and Javascript code that we write needs a program that understands how to interpret those tags and code. We give HTML files  an extension of .html so the Operating system knows to open it up with a browser instead of TextEdit or Notepad. The browser knows what to do with the codes and show us what the content looks like when the codes are rendered. We call that interpreting the code, or rendering the page. A text editor just shows us the characters, it does not interpret them.

For a list of Text editors see the following wikipedia article, http://en.wikipedia.org/wiki/List_of_text_editors