Thursday, April 30, 2009
FontTester
Excellent!
Tuesday, April 28, 2009
CurvyCorners
In class: final thoughts
I created these:The assignment allowed me to research explore different selectors and properties in CSS, and see the resultant effects of each line of code. I didn't know anything about CSS before this class,
and this mini-assignment really helped me learn quickly how to use style sheets and how effective CSS can be.
The purpose of a web author is to create and maintain a site that effectively conveys the content, message, and sentiment that the client wants the site to convey. I would say that the duties of a web author include:
- Branding
- Graphic creation
- Marketing
- Timely updates
- Making sure that the website is entirely functional at all times, in all [most ;)] browsers [curse you, backwards compatibility!]
- Coding
- Proof-reading content (including images, layout, and text)
Saturday, April 25, 2009
Excellent branding: Sophistimom
Friday, April 24, 2009
Facebook addiction
Yikes.
[Article from CNNHealth.com]
Wednesday, April 22, 2009
The story of the Twitter logo
[Article from Wired]
Sunday, April 19, 2009
Online shopping
[Source: CNet News]
To-do list
- Edit my navigation for my main page for module 4.
- Change the colors of the divs
- Change the positioning of the columns
- Switch the resume and sketches text to make all the resume content blue
- Change the hover features
- Add sketches
- Add photos
- Link to blog
- Add design philosophy page
- Make two more gradients
- Make three logos
- Make two more headers, and finish the first
- Do everything
Whiten your teeth!
The narrator selects his teeth by using the magic wand tool, and then whitens them by using the hue & saturation dialogue box, under adjustments. To return the shading between teeth that provides the tooth definition, the narrator adjusts the levels of the teeth selection.
Tuesday, April 14, 2009
From class:
What does she what to know? What does he want to do? They want to see Kyle's work (through drawings, sketches, and photos), learn about Kyle and his designs(through his resume and design philosophy), and keep in touch with Kyle.
What potential questions/tasks will you have for your users on Thursday? List at least five possibilities.
- Find Kyle's phone number.
- What is Kyle's email address?
- Who does Kyle make clothes for?
- What is your favorite sketch by Kyle?
- What is your favorite garment by Kyle?
| Point & click | Intuitive | Additional time required for interaction due to increase motor skills required. |
| Full text | Easily understood | Requires additional space |
| Text links | Always understood | Must be read, do not stand out as actionable items as much from other text |
| Small font | More info per screen | More difficult to read for some users |
With point-and-click navigation, the minimal additional time required for user interaction due to increase motor skills required is beneficial, because they are looking at Kyle's website longer, which is good from a marketing standpoint. The small font on the resume page is probably a bad thing and I should enlarge it. Because the design is very minimalist and simple, the full text and text links are okay, especially since each text area is blocked off in color.
Saturday, April 11, 2009
2:20 totally makes fun of people who like to magic-wand everything in a color range instead of using the "select color range" tool. I never knew about the select color range tool! [Embarrasing, I know.] Good to know. The color range tool is effective for pulling things off of their backgrounds. Just make sure that when you go to Select --> Color Range that you turn up the fuzziness so that you don't have a white (or whatever color your background was) fuzzy shadow around the foreground object you're extracting.
HyperStudio!
Thursday, April 9, 2009
Photoshop Eye Editing
In Photoshop, if you go to Image --> Adjustments --> Curves you can brighten a blue eye by selecting the blue channel and raising the curve.
I think this tutorial will come in handy. I've had to try to remedy red eyes many times before, but I usually suck at it. I usually try to replace the pupil by using the brush tool to make a new pupil, but the narrator selects the pupil area and deletes it, after making sure that the background color is black. He then goes back and adds the white eye-reflection mark. Duh! I felt so stupid after I saw that.
Wednesday, April 8, 2009
"If you love it, you don't know much about typography," Mr. Connare says. But, he adds, "if you hate it, you really don't know much about typography, either, and you should get another hobby."
Yikes.
[From The Wall Street Journal]
Tuesday, April 7, 2009
Bethany: Learn to use a computer
I definitely went crazy during module four. After working on my site on my laptop, here in 317, and on a couple writing center laptops, I had much older version of the web pages on my laptop. When I synced my laptop with my AFS space through an FTP server, via Dreamweaver, Dreamweaver uploaded the old version of my site. It did this THREE TIMES. I still don't know what I did wrong, only that the correct answer to "Update links?" is "HELL NO." I ended up having to redo about four and a half hours of work. During the final four game. Woot woot.
There was one part of my site that I could not figure out how to re-make. I had a border on the left side of a div, which had text in it, and before one of the three retro-uploads, the line was right next to the text. After Dreamweaver got real cool and intuitive, I couldn't re-make that border. The line was about 200px to the left of the text. I really want that line back!! Padding and margin for the div (and the div next to it) are set at zero. I really have no clue how to fix it. Help?
When doing my write-up for module 4, after I made the web pages, came up with more than a handful of things I want to change on the sites. The things I want to fix are mostly for ease of viewing and cross-browser compatibility (which are very important things). I mixed pixel and percentage values in my style sheets, and all of the text on the resume page is too small. I want to fix those things, at the very least, before the page is published.
Sunday, April 5, 2009
"Facebook saved my life."
He had overdosed, but was still conscious.
[Story from The BBC]
Friday, April 3, 2009
Youtube = doomed?
[Source: BusinessInsider.com]
Friday, March 27, 2009
BakerTweet
Technology + pastries = nom nom nom.
Tuesday, March 24, 2009
Audience Considerations
If I had to design for audiences, though, I would put his resume, design philosophy, bio, and contact information under a navigation topic like "employers" or "Kyle data" or something. I would put photos and sketches under a heading like "eye candy", and put his design philosophy and a link to his kidswear collection portfolio site under a heading like "customers" or something.
The website audience can be divided into many categories:
- Friends // Family // Employers // Customers
- Those who care about Kyle // Those who mostly care about Kyle's work
- Potential bosses // potential clients // people Kyle doesn't need to impress
- Moms who might buy kidswear from Kyle // people who will buy nothing // potential employers // professors
Sunday, March 22, 2009
Honors Option Colors
You can also download the hex and RGB values or see the ColourLovers page.
For the header, I want to use these colors on white:
Here's the colors all together:
Check out the ColourLovers page or download the hex and RGB values.
id vs. class
Your CSS for an id selector named "container" might look like this:
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
The HTML to display that ID-ed division is this:
<div id="container">Contained content</div>
Your CSS for a class would look like this:
.tealtext{
color: #008080;
font-weight: bold;
}
And you invoke that text with this HTML:
<span class="tealtext">This text is teal.<span>
CSS Basics
Saturday, March 21, 2009
HTML Punctuation Code
More specific HTML punctuation code:
‘ = ‘ = opening single quote
’ = ’ = closing single quote (or an apostrophe)
“ = “ = opening double quote
” = ” = closing double quote
′ = ′ = single prime (not in HTML 4.01)
″ = ″ = double prime (not in HTML 4.01)
– = – = en dash (shorter)
— = — = em dash (longer)
… = … = ellipsis
-Source: AListApart.com
Friday, March 20, 2009
Facebook Faux Pas
Way to fail, Mark. Way to fail.
Typography Tools!
Typetester.org -This site lets you format three columns of text - all with adjustable size, leading, tracking, color, background color, alignment, word space, and font. Then, the site prints out, in the columns, lorem ipsum text in your selected typeface with different formatting: bold, italics, uppercase, small caps, regular, and combinations of the above.
CSSTypeSet.com - you can use buttons to change the typography, and the text is displayed with your selected formatting on the right, and the CSS code is displayed in the text box on the right. I like it to see letter-spacing, word-spacing, and line-height properties, and see the exact values; it's hard to guess those numbers.
Design Police & Drop Caps
Drop caps are where it's at, also. I just wanted to leave the code in my blog so I'd remember how to do it. :)
Edit: that drop cap technique definitely does not work in blogger.
Horizontal Centering With CSS
I was doing some research about how to center page elements (both vertically and horizontally), and thought I'd share my findings here. I couldn't find anything about centering elements vertically, but there are actually two ways to go about centering elements horizontally using CSS, and only one is IE5 compatible.
Centering: Negative Margin
First, position the element's left edge at the horizontal center of the page using "position:absolute; left:50%;". Then, set the box's left margin is to the opposite of half the element's width using "margin-left:-266px;". Like this:
body {margin:0px; padding:0px;}
#Content {
position:absolute;
left:50%;
margin-left:-266px;
}
Centering: Auto-width margins
The other way is to center the element by setting left & right margin widths to "auto". This CSS is not supported in IE5, however. To remedy this, [kind of], we can use the "text-align" attribute. IE5 incorrectly applies the CSS "text-align" attribute to block-level elements. Declaring "text-align:center" for the containing block-level element (often the BODY element) horizontally centers the box in IE5. There is a side effect of this workaround: the CSS "text-align" attribute centers the inline content. when centering in this way, you should explicitly set the "text-align" attribute for the centered box, counteracting the effects of this crappy way to center things. Honestly, just use the other way. Code as follows:
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
}
Honors Option Nav CSS
Whether I choose horizontal or vertical navigation, I want to use classes like this:
a.red:link {color: #009900;}
a.red:visited {color: #999999;}
a.red:hover {color: #333333;}
a.red:focus {color: #333333;}
a.red:active {color: #009900;}
And the code for the first nav option would look like this:
Now I need to learn how to make all of the boxes the same with. I know Entropy4Atrophy had a post about horizontal and vertical navigation. Now I just have to read it (again) and understand it.
Tuesday, March 17, 2009
Back from break
Over break, I drove my house-mate Kyle, for whom I'm creating two sites for my final project and honors option, and myself back to East Lansing, and we discussed his sites more. I'm excited to make an awesome-looking portfolio site with bio, resume, and design philosophy pages that use different, yet equally extensive and awesome, style sheets.
Thursday, March 12, 2009
Get paid, son
Go forth and make bank!
Monday, March 9, 2009
Loves it
CentralScrutinizer.it — Love the typography, fonts, main navigation, right column "accessory" elements, embedded videos and music players, and the blog title header font colors that change from post to post.
Boompa.ca — Love the stacked water color pages look. I think they did it with CSS modifications to the HTML body tag, and then they added nested divs with different backgrounds for each column and elements. Check out their style sheet. I don't know how they did the effect where when the user puts their mouse over "Search", the search bar drops below it, and when the user mouses over "Find News by Artist" more sub-nav drops down from there, and disappears when the user removes their mouse. I would really like to figure out how to do that. Especially since it's all text, which means I could use that kind of effect for my honors option site.
The Mystery of 2010 — Love the navigation! Their style sheet shows that they placed their elements using ids and absolute pixel positions. Is that practice compatible with all browsers? Also, the moving background, though super cool, is kind of distracting. But I still love it.
Thursday, March 5, 2009
Image Slicing
I found and watched this tutorial on WebDesign.org that is 15 minutes long (kind of long, I agree) that shows how to use Photoshop and Dreamweaver to make image slices and Photoshop will write the appropriate code for you either in HTML tables (boo!) or CSS (yay!). And I have both programs on my laptop and in 317 Bessey. Yessss. :) So I will likely use that technique for the kidswear portfolio, my final project.
I'm so excited now! :)
Thursday, February 26, 2009
Live streaming from The White House
The site also uses Flash Player 10, which isn't installed on my computer. I tried subscribing to the RSS feed, but the link is broken. There is also a White House blog and a White House youtube channel.
The Washington Post also noticed the shortcomings of the website and did an article about how the Obama campaign team utilized technology throughout the campaign, and how the Obama Administration would like to utilize technology now. It also discusses the bumps in the road the Administration's web team has encountered. Check it out. :)
Saturday, February 21, 2009
Quick Web Typography Guide
Size - Make sure your text is large enough to be easily read by old people on a 15 inch MacBook. Don't make people squint and find their glasses. Make your site easy to read.
Hierarchy - Coordinate serif and sans-serif fonts, caps, italics, underlining, bold, contrast, size, and font styling in order to create a visual hierarchy for the reader, and provide text organization.
Space - Use white space both between lines of text and blocks of text, like paragraphs or columns, in order to focus the readers gaze on the content.
-summary of A Guide to Web Typography
Thursday, February 19, 2009
Blog Design
- Readability and text styling, including lists, padding, paragraphs, use of bold, and sub-headers
- Useful sidebars
- Unique themes: artistic/creative, typography-based, colorful, interesting headers
- Comment design
- Effective, usable navigation
- Images in posts
- Footers
- Color design
- Subscription areas / social media integration
Generators
On that note, this Color Name Generator
comes up with what I assume to be random could-be color names from a never-updated list. So if you're not feeling linguistically creative when coming up with color palettes on ColourLovers.com, this site can help you out in naming your palette, if you want to actually utilize the palette in future designs.
Tuesday, February 10, 2009
Cyber flashcards!
Check out this game with my Spanish vocabulary!
Monday, February 9, 2009
Steak 'n' Shake
Friday, February 6, 2009
Coding resources
MyCelly.com has free, simple CSS layouts. I looked at some of them, and I'm starting to get the idea of CSS. OpenDesigns.org has free CSS layouts that are actually visually appealing.
Also, this site has aspects to take into consideration when designing websites and pages in order to make pages accessible to those with disabilities.
Have a good weekend!
Therefore purple means....?
"The study... said nothing about mixing red and blue to make purple." Bummer. :(
Credit: NYTimes.com
Love colors?
To make a palette of five colors, you can pick colors by hex, RGB, CMYK, and/or HSV values. Or by using one of the three sliders or black/white/color field. You can then use that palette to make patterns using the sites selection of vector patterns, including plaids, retro themes, stripes, and more ornate designs. Check out my palettes!
You can also see other users palettes, and search by hex or hue.
Also, they have a really cute favicon.
Wednesday, February 4, 2009
G-Stalk, from Google
The implications for this are frightening. This seems like the next step in our government's progression toward 1984-style Big Brother monitoring.
If you reduce my language, Big Brother, I will cut you. This is double un-good.
How much technology is too much?
Sunday, February 1, 2009
Change.gov = WhiteHouse.gov
Also, Change.gov now is pretty much just a link to WhiteHouse.gov.
Check out WhiteHouse.gov 's new design, navigation, and content. I'm way impressed.
RSS feeds = ♥
I love my Google Reader. :)
Food for thought.
If we are artists, designing beautiful sites, sources of information, reference, and leisure for our users, and we use website design as our creative outlet, we should always be using the creativity around us to inspire our work. Alignment, navigation, graphics, colors schemes, fonts. Every aspect has to be thematic in order to make a cohesive, memorable website that users enjoy going to, and return to in the future.
Food for thought.
Groupboard.com!

Explore, interact, chat, and draw. You can be anonymous or pick a user name. No registration needed. And the board opens up in a new window, so you can view two pages at once, and hyperlink your chatting friends.
Now it seems like forums and messageboards are more popular, and instantaneous interactions (like AOL's AIM Chat and chatrooms) are more for singles to meet up and for people to use webcams. That kind of thing.
But chatrooms, if held semi-privately, can be a beneficial webspace to interact with others. More simplistic than a program you have to download, with features the user doesn't need, Java based text-and-graphic applets convey information in a very simplistic fashion that leaves the user focused on the content, as opposed to the method of communication.
Until next time.
Friday, January 23, 2009
Ain't nothin' but a G Thang
Some people think that the new icon is hideous. That's okay. The favicon might not be there for long.
Homokaasu.org
Also, The 80zer is a pretty hilarious thing I found, where you can type in any web address, and the program will make it appear as it would have in the 1980s. MIDI music, moving text and graphics, hot pink, Poison photos, rainbows... it's fantastic. I found it works best with simple HTML pages, as opposed to pages written in XML or XHTML.
The same page that hosts the 80zer has a program you can use either through the site or download to your hard drive to use. The Rasterbator takes uploaded images and blows them up, formatting them into a huge graphic pdf file that you can piece together, like a puzzle with a bunch of pieces that are 8.5 by 11, and put up on a wall as art. My house is planning on rasterizing a handful of images from Alice In Wonderland (the book) and using Mod Podge to adhere them permanently to the wall. Check out some of the cool examples that have already been done.
+3 Internet.
Angel or demon?
Worse than Angel, though, is Lon-Capa. It's interface, navigation, and organization are equally bad, but the site is inconcievably slow. This is extremely frustrating when you're completing homework against a deadline, and the page won't even load the question or check your answer.
I'm so glad I don't have CAPA homework this semester. College of Nursing: look at me now!
Reincarnation?
Way to go, gamers.
Thursday, January 22, 2009
Inauguration on the Interwebs
The article says that, "The peak for web traffic, according to Akamai, came at 11.45am EST – 4.45pm in the UK – on Tuesday as 5,401,250 web users hungry for news of the inauguration logged on to news sites within a minute of each other."
That's insane. It's awesome that so many more people can easily access information and news relative to their lives, and keep them informed and up to date about the world around them.
In other news, a girl in this class just toured my (co-op) house. Awesome! Avalon rules!! :)
Thursday, January 15, 2009
Vintage vs. Obsolete
I just did like twenty Google searches for it: "Apple software 1990s", "Clarisworks", "Slideshow applications". My hands are empty. I have literally come up empty-handed.
In slightly-related news, Apple is 31 years old.
In less-related news, I am addicted to StumbleUpon. If you're not familiar, it's a toolbar that you download and install in your web browser. After making an account and inventorying your interests, you can click the "Stumble!" button, and it will load a webpage or site that is related to your interests. From there, you can click the thumbs-up button, showing you like the page and would like to see more pages like the current page you're on, or you can click the thumbs-down button, and Stumble won't pull up pages like that for you anymore. You can also send pages to your friends on StumbleUpon or any email address using the Stumble toolbar. You can stumble categories, type in a tag, or stumble your friends's favorites. You can also stumble photos or videos exclusively. It's fantastic. It has changed the way I use the internet. I like it because I learn a lot about things I am interested in or passionate about, often through news pages that have been created the same day.
Well, I have four Stumbles my friends have sent me in the past twenty minutes. I can't help but to click that button. Until next time....
Tuesday, January 13, 2009
First post!
The male-accessible pink page is my goal this semester.
Also, I found this gadget, which is essentially a hex-to-RGB translator, but can also be used to find the exact hex code (or RGB values) of a color you want.
This page is kind of EPIC because it lets you take any image that you like the colors in, and it provides swatches and hex codes for the main colors in the image. Conversely, this site lets you pick colors via a swatch on the right hand side, and finds images on Flickr that have your selected colors in them. Fantastic.
Alright, I've spent way more than five minutes on this. I'm listening to M.I.A. and mentally determining appropriate color schemes for her music videos. Time to purge my mind of color and get workin' on my other homework.