Google Font API - Strange Glitches

Google recently released fonts that are accessible to all free of charge. Web designers can now reference them and expand our typographic possibilites. Pretty nifty. Here is where shit hits the fan. If you download these fonts to use in mockups in Photoshop all web browsers (barring chrome) have a glitch where they call on the regular font from the system instead of the italic/bold/bolditalic font.

This glitch only effects Droid Sans, and Droid Serif. Which is strange in itself. So there are two take home messages I have for you:

1. If you want to speed up your page loading by downloading these fonts, just skip Droid Sans and Serif, there is some goofy glitch that isn't worth your time.
2. If you want to use these fonts in mockups install the fonts directly to the Adobe Commons font directory, not the system font directory. 
1. This can be done by navigating to C:\Program Files\Common Files\ Adobe
2. Then either creating or entering a folder called "Fonts"
3. Place any extra fonts in here

I had a heck of a time working this out because the new version of Adobe CS5 doesn't create a Fonts folder. Chaos!

So there you have it. Feel free to check out the font api. If you are in to typography you will be seeing these fonts pop up everywhere in the very near future.

Free Icons: For Web Design

When webdesigning (or creating a portfolio) it is nice to drop in some icons. Consider a necessary tool in design, along with photos, text and color pallets.

For Action Buttons Around The Site

• A few good music media themed icons
• Some great white on black rounded rectangles, general web dev
• Nice Clean Simple Sketch icons
• Green and Blue, Big and textured with feeling

For In Text Graphics

• Flat Screen TV
• City Icons, nice high res
• High Res; Sailboat, car, pie chart

Networking Icons

• Shiny Clouds
• Smudgy Paint
• Polaroid type
• Gradient Circles

as a side note on my way to learning wordpress and understanding it's enigmas, here is a great theme.
http://www.dizenoco.com/brave-zeenat-free-wordpress-theme/
the psd and the theme are free, fancy j-query and all sorts of interesting goodies.

After browsing around the Wordpress database for themeing (Codex) I blew a raspberry in the air and started searching. Here is my best find on Learning to Theme by theme shaper. Seems to meet my needs and walk you through the ugly. Most importantly it'll be more fun than disassembling someone else's theme. Everytime I have to do that I feel like a cross between a surgeon and an archeologist. I constantly find myself thinking, "is that glyph outdated or is that a spleen, and therefor somewhat necessary?"

Photoshop Tutorials

If you don't mind the english language being butchered at every full stop then these photoshop web design tutorials are for you.

They give a great idea of designing with a web 2.0 look, using layer effects and a variety of tools. It isn't always the best explanation of what the tool does, but usually isn't too hard to grasp. Also the colors that are chosen aren't web safe (so make sure you aren't trying to select web safe!).

Most of the designs are dark with light text, but they look great.

http://www.grafpedia.com/category/tutorials

Lorem Ipsum - Greeking Out

Lorem Ipsum is dummy text that you can place when you want to see how something would look. It really comes in handy in layouts for web and any media with blocks of text. It mimics how real words look. Even sentence and paragraph length.

And now it isn't just on lipsum.com
You can download a version built with Python for windows (.exe) or Linux (.deb).

So hop on over to the google code projects page and download that sucker

LAMP Stack / Joomla / WordPress

Linux Apache MySQL PHP (the makings of a common server)

If you are a developer for Wordpress or Joomla you need to setup an environment (local server) to run these programs on your computer so that you can test things without having to be on the internet.

The developers at Ubuntu are a godsend and have made the actual LAMP stack installation heaps easier than in the past. In applications > accessories > terminal :

sudo apt-get install lamp-server^

wow, that is so much easier than having to dual boot with turn-key or going through the old process

Finishing off the details is pretty straight forward. Briefly the steps are listed below, for detailed steps with screenshots, hand holding, and all the superfulous writing you could hope for go to TuxTweaks

phpmyadmin is supposed to make life easier too, so let's install that while the ball is rolling

sudo apt-get install libapache2-mod-auth-mysql phpmyadmin

 Select apache2, and dbconfig-common using tab and space bar.

Cool, now we can actually set up where we want to host all of the files
I've decided to go with /webdev/joomla and /webdev/wordpress. Both will be located in my home folder. Again if you need serious hand holding go visit TuxTweaks for this tutorial with screenshots.

cd
mkdir webdev
cd /webdev
mkdir joomla wordpress
cd /etc/apache2/sites-available
sudo cp default joomla
sudo cp default wordpress
sudo gedit joomla

In this gedit window you need to get yours to look like this

ServerAdmin webmaster@localhost
ServerName joomla

DocumentRoot /home/yourID/webdev/joomla/
Directory /
Options FollowSymLinks
AllowOverride None
/Directory

Options Indexes FollowSymLinks MultiViews
AllowOverride All

Repeat with wordpress instead of joomla in there.

sudo a2ensite joomla wordpress
sudo gedit /etc/hosts

Then enter in:

127.0.0.1 localhost joomla wordpress

And back in terminal

sudo /etc/init.d/apache2 reload

If you get a reload error like me then:

echo "ServerName localhost" | sudo tee /etc/apache2/conf.d/fqdn

And then run the reload script from above. And now we need to change some permissions!

sudo chown -R USERNAME /etc/phpmyadmin

Ok! Now we can download the newest version of Joomla and Wordpress and extract them to their respective folders. We still need to set up a mysql database for each so let's do it (almost seeing the light at the end of the tunnel).
Pull up firefox and navigate to "http://localhost/phpmyadmin/"
Log in with root, and whatever password you created.
Now click on privileges at the top > Add new User, and enter in the following:
Joomla
local> localhost
password>
password>

and then click the radio button for creating a new database as well (middle one), then find go at the bottom and click that.
Repeat for wordpress.

Now when you navigate to http://joomla/ or http://wordpress you get an installation page. It should be pretty straightforward. The mysql database is the what you created earlier(joomla or wordpress), username you just made (joomla or wordpress), you have your password. On Joomla they try and get a little tricky at one part, in the bottom box they want you to type joomla again.

To remove the installation directory for joomla (it will prompt you):

sudo rm -R webdev/joomla/installation/

CSS: Getting specific with lists

Cascading Style Sheets offer an opportunity to get specific with lists, and here is how:

To create a specific outcome solely for unordered list's (ul) items (li), as opposed to all list items (li) do the following

ul li { }

for all lists you would simply use

li { }

This can be applied specifically for your blogger account with the following markup:

example: from this website!

.post ul
{ margin:0; padding:0; }

.post ul li
{ line-height:1.5em; list-style:none; background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat $startSide .3em; vertical-align:top; padding-top: 0; padding-$endSide: 0; padding-bottom: .6em; padding-$startSide: 17px; margin:0; }

The Results of the above code:

1. This is an ordered list
   
2. This is a second item

• This is an unordered list
  
• This is a second item
  

This same thought process can be applied to any set of sequential markup tags. Enjoy and code safely ,-)

Web development

Here are a few websites that I have un/officially helped in bringing about.

4 Sweet Feet
Creek Valley Estates