EMU Marketing

[emumarketing]

Willamette Valley Music Fest: The Making of…

Officially, I think this was the 40th Anniversary for WVMF, which used to be Willamette Valley Folk Fest, and is now becoming Oregon Showcase featuring WVMF.  So due to all of the above, we thought it would be better just not to mention the 40th anniversary thing at all as not to upset anyone.  We weren’t surprised when Darrel told us it was changing again next year.

So instead of having music being the only draw, this year there are separate categories of fun divided into: Music, Art, Film, and Village  (I know the village sounds kind of creepy, but its probably the funnest one of them all.)  Nikolas Wise and myself split work on the project and got going on some concepts.  After reluctantly letting go of Neon Dinosaurs, we decided to do a cassette tape theme after this really awesome illustration Nik did:

But wait there’s more!

Then we thought it would be super rad if we actually physically spelled out the words with tape instead of drawing it.  After a lot of trial and error,  we dedicated a few days to spelling out the key words with some old tapes I found under my car seat.

So after all the fun stuff, Nik took on the arduous task of updating/ remaking the website and I took the images into Photoshop to make them working pieces to insert into poster/ web graphics.  We got to decide on the best way to convey the information to the public.  At first we wanted to make separate posters for each category with the related information on them (art, film, music, village) and a schedule/ map handout that would fold into something  pocket size (with a totally awesome poster on the back.)  But after getting an estimate from the printers we had to sacrifice separate posters for the foldout.  The main poster turned out like this:

Nik designed the front of the foldout (which folds down into about the size of an iphone):

and the back has one of these four images:

Notice each category is color coded, that’s something we kept uniform on the website and ads.  After that we pretty much just had to redesign everything to fit the fishbowl, newspaper ads, and website banners.  I think the Eugene Weekly insert turned out especially nice:

For more info check out the website.

and feel free to direct any questions at:

[email protected]

Originally posted by Zach Yarrington.

[emumarketing]

Learning Outcomes: Automated Batch Process

Photoshop’s automation feature is designed to make your life easier. Staring at a folder of a hundred pictures that all need to be resized? No problem. Need to convert 50 images to black and white? Set it up, let it run, come come back in ten minutes. It works like this; you open the first image of the series, and record the actions. You save the process, then apply it to all your other images. Easy enough concept, now I’ll walk through it and show you what it looks like.

 Step 1: Open the first image

You need to manually perform the actions on at least one of the images, so Photoshop can see what you want to do to all the others.

Step 2: Open the Actions Panel

If it’s not on a toolbar, it can be found under Windows> Action

Step 3: Create New Action

I named my black and white conversion action “Black and White”, obscurely enough. Hit the “Record” button and . . .

Step 4: Make the Changes

All I’m doing for this process is converting a color image to grayscale, but you can do pretty much anything here. Apply filters, resize, whatever needs to get done. Remember that any changes made here will apply to every image in the batch. I find that recording a “Save As” action, and selecting the image type makes the automation run a lot smoother, so your not always having to hit “ok” on the save dialog box to continue to the next image.

Step 5: Stop Recording

The little square in the Actions window.

Step 6: Make it Happen!

File> Automate> Batch.

Select a source folder and a destination folder. Hit “Okay” and sit back and enjoy the fact that you just avoided a huge amount of mindless repetition!

Originally posted by Nikolas Wise.

[emumarketing]

Step Enlarge Images for Better Results

Step enlarging is a process I use for enlarging digital photographs to enormous sizes with fairly good results. The advantage of step enlarging is that you are enlarging the image in very small steps, which gives the computer smaller bits to work with and forms cleaner lines as opposed to enlarging an entire image all at once.

Getting Started

What I do to get started is to make an action that will increase the size of my image by 5%-10% every time I run it then run the action until i reach my target size and then crop/scale the image back down exactly how I want to. Usually i will also sharpen the image with High Pass or Unsharp Mask.

Record the Action

Go the the actions panel in Photoshop (its under the window menu) and make a new action by clicking the button and the bottom of the panel. When a new action is made it automatically starts recording anything we do from here on out will be recorded at part of our action.

Now we need to enlarge the image by 10% Notice I selected “Bi-Cubic Smoother” from the Resample Image menu. This will smooth out the blocks of color that sometimes happen when you enlarge an image.

Now click OK and stop recording your action by hitting the stop button at the bottom of the actions panel.

Run your Action

click the play button, again at the bottom of the actions panel to run the action. This will enlarge your image by 10% . Keep doing this until your image is a little over where you wanted it.

when you are done run image size again and re-size the image to the exact size you need.

Check your Results

Print out a sample of your image and compare it against simply resizing the image all at once. You should be able to see sharper lines and crisper edges. Sharpen the image using your favorite method and continue on.

Results

I’ve been able to use this method to enlarge my own 6 megapixel photos up to about 90 inches tall. The results were still very clean and hard to notice especially if you run noise reduction first and a sharpening after the enlargement.

Originally posted by Patrick Arlt.

[emumarketing]

Coding Open – The Benefits of Free and Open-Source Software in Academia

The term “open-source software” means many things to many people. To some, it’s a method of collaboration; an easy way for your work to benefit your peers. Others see it as a confusing business paradigm. After all, how can you make money by giving away your work? Still others see it as an affordable way to launch a business; or teach yourself a new skill. Clearly open-source software has many uses. But like anything, it’s important to understand both the benefits and the drawbacks to going open-source. Specifically in an academic setting.

So let’s be clear. When I say open-source software, I’m talking about any piece of code, however small or large, that has been freely and openly released for public consumption by the code’s author. This means that anyone is free to download and use the software “as-is,” or to make changes and additions to the code and redistribute it (depending on the specific license the code was released under).

Now, this is not meant to be a stab at closed-source (or proprietary software), which has proven a reliable solution to many problems that businesses face. Rather, it’s meant to examine some of the less obvious benefits to deploying open-source software, especially at academic institutions.

Cost

Systems built on open-source software are cheap. Especially in Academia, where money (and fundraising) is always an issue, small departments can stand to save thousands of dollars if they plan ahead and hire a capable sysadmin or developer. Let’s look at some numbers.

A new quad-core Xserve from Apple will set you back $2,999.00 dollars. You can put together a comparable quad-core server that runs Unix or Linux from Newegg for a mere$938.95. That’s 1⁄3 the price of the Xserve! Plus you get more memory and a redundant hard drive in case one fails (not all that unlikely).

You could spend the $2,000 you saved on a battery backup solution, a couple redundant servers, or even more staff! Load up that commodity server with PHP, MySQL and (everyone’s favorite) the Apache web server. Now you’ve gotten all this great software for free and you can run almost any modern web application on the cheap.

Now, granted, part of what you’re paying for with the Xserve is Apple’s suite of remote-management software, which makes many daily maintenance tasks a breeze. However, if you took my advice and hired a smart sysadmin, then she should have no problem maintaining this system for you. And you’ll be better off having a full-time sysadmin, instead of springing for the Xserve and having to hire a part-time sysadmin who doesn’t know what cron is. You could even hire a couple geeky students to run your server for you on the cheap. So long as you’re not storing any confidential information, there is no reason they can’t take care of this.

But let’s think a little bigger. Now multiply that $2,000 by 50. If you have 50 departments all running one webserver (or 25 departments running 2) you’ve now saved$100,000. That money could employ three people, full-time, for one year. That’s money that could have been wasted on unnecessary equipment. Make one of those positions a floating sysadmin and you’ve already come out ahead.

Community

When you choose to go with a mature open-source solution, you gain access to a huge community of dedicated contributors whose collective knowledge is available to assist you. Like in academia, the goal of open-source projects is to take one person’s idea and grow that idea into something better. Taking the contributions of hundreds or thousands of people and building something amazing.

It’s important to realize that this community is not just made up of lone programmers working in their off-hours. Many huge corporations are major contributors to open-source projects (especially when Linux is concerned).

Security

One of the biggest complaints about open-source software always seems to be over security. There is a legitimate concern that having your code open for all the world to see can make it insecure. That is in fact true. The more information black hat programmers have about your software, the less work they have to do to find holes.

However, having your source code open also allows white hats (the good guys) to peruse the code and submit patches for security holes. Proprietary software developers typically have large teams of debuggers looking over code, but how can you say no to more help for free? Anyone can miss a potential problem, and in this case the issue is simply if it’s better to have more people crawling your code for problems, or less.

This process of peer-reviewing code greatly contributes to the learning opportunities that open-source software provides.

Learning Outcomes

I think that open-source software presents an amazing opportunity for student learning. Going open-source encourages students to reach out to the community and helps them understand the underlying technologies of the software.

While proprietary software manufacturers provide solutions that “just work” (or are at least supposed to), they actively prevent you from poking around the code. This means that you’re at the mercy of the manufacturer to provide patches, updates and improvements. Many times a problem one person is facing requires a custom solution, one that doesn’t merit the attention of the software’s goliath publisher.

Open-source software allows for the knowledgeable developer to make this improvements herself, and submit them back to the community at large. Students who are working with open-source software are encouraged to think critically and troubleshoot problems themselves. This process makes them expert problem-solvers, instead of having to waste their time on the phone with tech-support.

Open-Source Software We Use Every Day

WordPress

Drupal

Firefox

Thunderbird

OpenOffice.org

Darwin (The Soul of Mac OS X)

FreeBSD

Linux

Apache

PHP

Python

The Federal Government’s website recovery.gov is built on the Drupal content management system (which is built on PHP and runs on LAMP servers worldwide), as are many other high-traffic websites.

The University of Oregon’s Office of the President runs WordPress 2.7, the popular open-source blogging platform.

Licensing

The licensing of open-source software is a huge topic and worthy of its own post. Needless to say it’s worth mentioning here. Wikipedia has a good article on Free Software Licensing, which may be a good place to start. You should also look into theGNU Public License, which is the most widely used free software license.

Finally, I’d be remiss if I didn’t mention Creative Commons, a wonderful organization that has made sharing your work online even easier.

Creative Commons is a nonprofit organization

We work to increase the amount of creativity (cultural, educational, and scientific content) in “the commons” — the body of work that is available to the public for free and legal sharing, use, repurposing, and remixing.

Originally posted by Tristan Waddington.

[emumarketing]

INTERACTIVE DESIGN: EMU Marketing Art Installation

Artists’ Reception | Fri, Oct 16th | 4-7pm | Adell McMillan Gallery

UPDATE – Show Website: id.uoregon.edu

Darrel Kau, Director of the UO Cultural Forum, offered us an opportunity to exhibit our work in the Adell McMillan Art Gallery. Needless to say, we jumped on it.

This was an ambitious project for us. While the designers had experience creating small exhibits through their classes, none of us had executed an art installation that included a 34′x9′ wall, six 8′x8′ display cases, and a 17′x11′ display case. The challenge was to create an exhibit that reflected our collaborative work style, gave props to the designers and programmers, showcased how we advance student learning, and gave those viewing the installation an engaging, interactive experience.

We like this kind of challenge, and we made it work. Big time.INTERACTIVE DESIGNshowcases projects student and professional staff executed this past year. It also highlights academic and personal projects student staff produced using skills they acquired while working at EMU Marketing.

The small display cases feature: personal and class work done by staff; a retrospective of the designer’s posters and a slide show of their website collaborations with the programmers; and the fun side of programming, [like colored arcade buttons where viewers can create a digital painting using algorithmic code, a programmer's real-time GPS tracking, and a customized wordle using Google's hourly top search terms displayed on a wall of four monitors].

The 34′ wall features the designer’s inspiration to completion for three projects, including slide shows and video.

The 17′ display case features a visual representation of the 48,481 lines of code written for a customized point of sale, accounting, and inventory management system.

Viewers can currently comment on the show using a virtual keyboard at the show or by text message. And the photos of the artists are rendered in ASCII Art.

Show runs through Nov 13th.

Originally posted by Lee LaTour.

[emumarketing]

Learning Outcomes: Javascript Text Wrapping Function

This is an old function I wrote a while back and drafted up but never got around to posting. I hacked it together to fix the behavior of some BBCode buttons on one of our older sites.

The function takes the selected text (in a textarea field), wraps it with the appropriate BBCode tag (set by the type variable) and inserts it back where it was. If no text is selected, then it simply appends a blank BBCode block to the bottom of the textarea. It could probably stand to be rewritten in jQuery, but I don’t have time right now.

function wrapText(type) { var textarea = document.forms.edit.elements.pcopy; var caretPos = textarea.selectionStart; var caretEnd = textarea.selectionEnd; var value = textarea.value; if (caretPos < caretEnd) { textarea.value = value.substring(0, caretPos) + //all the text before the selection '[' + type + ']' + //bbcode start value.substring(caretPos, caretEnd) + //selected text '[/' + type + ']' + //bbcode end value.substring(caretEnd, value.length); //remaining textarea content textarea.focus(); } else { var bbcode = '[' + type + '][/' + type + ']'; textarea.value = value.substr(0, caretPos) + bbcode + value.substr(caretPos); textarea.focus(); textarea.selectionStart = caretPos + 3; textarea.selectionEnd = caretPos + 3; } }

Originally posted by Tristan Waddington.

[emumarketing]

Remote system logging with syslog-ng

Remote system logging has many advantages. If you’re running multiple servers it can be difficult to keep track of all the log files, or pinpoint a problem when one crops up.

By logging your system messages to a remote MySQL server you can easily write complex database queries to parse through the cruft. The FreeBSD port of syslog-ng makes this almost a no-brainer.

Step 1) Create a MySQL database and table to log into: On my server I’ve created a MySQL database and user both named syslog. The user must have full privileges over the database. You’ll then need to create a logs table:

CREATE TABLE IF NOT EXISTS `logs` ( `host` varchar(32) DEFAULT NULL, `facility` varchar(10) DEFAULT NULL, `priority` varchar(10) DEFAULT NULL, `level` varchar(10) DEFAULT NULL, `tag` varchar(10) DEFAULT NULL, `datetime` datetime DEFAULT NULL, `program` varchar(15) DEFAULT NULL, `msg` text, `seq` int(10) unsigned NOT NULL AUTO_INCREMENT, PRIMARY KEY (`seq`), KEY `host` (`host`), KEY `seq` (`seq`), KEY `program` (`program`), KEY `date` (`datetime`), KEY `priority` (`priority`), KEY `facility` (`facility`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2827 ;

Step 2) Install syslog-ng:

$ cd /usr/ports/sysutils/syslog-ng2 $ make install clean

Step 3) Configure syslog-ng to start automatically: Add the following lines to your /etc/rc.conf file. These will ensure that syslog-ng will start on reboot instead of FreeBSD’s default syslog daemon.

syslog_ng_enable="YES" syslogd_enable="NO"

Step 4) Create syslog-ng.conf and modify it to log to MySQL:

$ cp /usr/local/etc/syslog-ng/syslog-ng.conf.sample /usr/local/etc/syslog-ng.conf

Append the following definitions to the end of your syslog-ng.conf file, replacing HOST,USER, PASSWORD and DATABASE with your MySQL database information:

destination d_mysql { program("/usr/local/bin/mysql -hHOST -uUSER -pPASSWORD DATABASE < /var/log/mysql.pipe"); pipe ("/var/log/mysql.pipe" template ("INSERT INTO syslog.logs (host, facility, priority, level, tag, datetime, program, msg) VALUES ('$HOST', '$FACILITY', '$PRIORITY', '$LEVEL', '$TAG', '$ISODATE', '$PROGRAM', '$MESSAGE' );\n") template_escape(yes)); }; log { source(src); destination(d_mysql); };

If you followed the instructions in Step 1 then USER and DATABASE should both be "syslog". HOST will be localhost or an IP address, depending on where your database is located.

NOTE: You'll need the MySQL client installed on this server for this to work properly.

The last line that begins with "log" tells syslog-ng to send any messages received fromsrc to your d_mysql destination (where src is defined near the top of syslog-ng.conf).

If you don't want to log all system messages to the database, you can apply one of the default syslog-ng filters. So if you only wanted to log security messages then you could do this:

log { source(src); filter(f_security); destination(d_mysql); };

Step 5) Create the mysql.pipe:

$ mkfifo /var/log/mysql.pipe

Step 6) Shut down the default FreeBSD syslogd:

$ kill `cat /var/run/syslog.pid`

Step 7) Start syslog-ng:

$ /usr/local/etc/rc.d/syslog-ng start

If you don't get any error messages then syslog-ng should now be running and logging messages both locally and to your MySQL database.

You can test your new setup by using the logger command to create an error message:

$ logger -p auth.error "Does it work?" $ tail /var/log/auth.log

Just check and see if this appears in your new logs database.

Here are some good resources for more information:

Syslog-NG Installation

Centralized syslog-ng to Mysql:

HOWTO setup syslog-ng to log to mysql

Logging with syslog-ng

Originally posted by Tristan Waddington.

[emumarketing]

Quick and easy AJAX with JSON-RPC

The web has come a long way since the days of intrepid coders hacking asynchronous content into pages with hidden iframes and dynamically loaded javascript files. Today we take the ease of use that standardized support for XMLHttpRequests (XHR) affords for granted. Libraries like Prototype and jQuery help to clean up code by handling generating requests and processing return values but we can do better. Here’s where RPC comes in.

Using only the components available from the browser requires a lot of code. Here we have to manually find the correct browser object, build the request, monitor the progress and interpret the response all by hand. Of course, no one would actually use this…

var xhr; // Firefox/Opera/Safari/everyone else... try {xhr = new XMLHttpRequest();} catch (e) { // New IE? try {xhr = new ActiveXObject('Msxml2.XMLHTTP');} catch (e2) { // Old IE? try {xhr = new ActiveXObject('Microsoft.XMLHTTP');} catch (e3) {xhr = false;} } } xhr.onreadystatechange = function() { // Wait for returned data if(xhr.readyState == 4) { // Check the response headers... if(xhr.status == 200) { // process results... } } } // Build the request xhr.open(GET, '/user/search?s=' + encodeURI(search_string), true); xhr.send(null);

Javascript libraries do an excellent job hiding these nuts and bolts. But as general purpose tools, they don’t do a great deal to ease communicating with server components. We’re left making server agnostic posts to URLs and processing them like traditional web forms.

new Ajax.Request('/user/search', { parameters: {s: search_string} onSuccess: function(transport) { // process result... } });

Remote procedure calls (RPC) solve this problem by allowing remote invocation of code on a server. The RPC server component handles interpreting and validating requests and forwards them to the appropriate methods. By doing this we get away from writing code that does nothing more than interpret parametrized requests and pass them to business logic.

Pos.Rpc.call('PosUser', 'search', [search_string]).and(function(rs) { // process results... });

While this works fine for calling static methods, it isn’t very well suited to interacting with persistent objects. For this we have a simple object request broker (ORB) that creates references to specific server objects in javascript. These references use a light weight interface description language (IDL) that defines the capabilities of the server object to the client. Once the reference is initialized, it transparently processes calls by passing requests to the server and returning the results through a fluid interface.

new Pos.Rpc.Reference('PosUser', user_id).ready(function(user) { user.getFullName().and(Element.update.curry('user-name')); });

For some extra spice, PHP exceptions and other errors trickle down to the Firebug console to make debugging a breeze. Also, requests are queued and bulk-processed where possible. This happens transparently and cuts back drastically on the total number of real HTTP requests that have to be made.

Originally posted by Paul Wells.

[emumarketing]

Learning Outcomes: Generating Useful Error Pages With Pound

We use Pound as a reverse-proxy and load-balancing frontend to our web cluster here in the office. Today we had some NAT problems with our proxy server and ended up with some server downtime. Pound defaults to outputting a cryptic error message when it can’t reach a valid host:

  The service is not available. Please try again later.

This isn’t very helpful to clients who probably have no idea why their site is unreachable. After getting NAT back up and running, I decided to work on replacing this error with something a little more useful.

Pound lets you create error files that will be displayed if all the hosts are unreachable. Just add any of the following strings to the ListenHTTP section of your pound.cfg file (man pound for more info):

Err414 "filename" #A file with the text to be displayed if an Error 414 occurs. Default: "Request URI is too long.". Err500 "filename" #A file with the text to be displayed if an Error 500 occurs. Default: "An internal server error occurred. Please try again later.". Err501 "filename" #A file with the text to be displayed if an Error 501 occurs. Default: "This method may not be used.". Err503 "filename" #A file with the text to be displayed if an Error 503 occurs. Default: "The service is not available. Please try again later.".

Pound appears to cache these error files, so you’ll need to restart pound for it to pick up any changes to the error files you specified.

Presenting visitors with a more informative error message will do wonders to ease the stress of any unexpected downtime. I highly recommend it.

Originally posted by Tristan Waddington.

[emumarketing]

Learning Outcomes : Posters This Year

We have completed a huge amount of posters so far this school year and we keep cranking them out. To the left you can see a few of our recent projects. This past year I have learned a lot very quickly in the creative atmosphere of EMU Marketing. I thought I might share a few of the things I’ve discovered about working with print on tight deadlines.

1. Keep things fresh. If you are spitting out posters quickly it might be tempting to repeat the same basic style or idea each time. Unless you are establishing a brand this is generally a bad idea. For the piece to serve its function it has to fit the needs of the project. Make sure that the visuals attract the correct audience, It might be the most interesting poster ever designed but if it doesn’t stand out to the person who would want to attend the event, it is not successful.

It is also important to keep the job fresh for your own mental health. Keep yourself on your toes and always challenge yourself to look at projects from a new angle. You will find yourself excited to come to work and even more excited for new assignments. Remember that each project is potential portfolio item. Try to make each one worthy of a spot in your portfolio.

2. Plan for the worst. Printers are unpredictable. Chances are the printing will take longer than you expect. There have been many times that I was glad that I had finished a project quickly when I saw how long printing took. Never take chances when it comes to a deadline.

Computers are just as bad as printers. They work when they want to and crash when they feel like it. Save your work frequently and definitely consider picking up an external hard drive. I sleep much better at night knowing that I have all my important documents saved on my external in case my laptop goes down or gets lost (knock on wood).

3.Work when you are inspired. We all work best at different times, some of us are morning people and some of us are night owls. I get most inspired late at night. Though I am not on the clock, I make sure to do a few quick sketches for when I come into the office next. If it is too painful to wait, I will pull out my laptop and start working on it right away. I find that these rough sketches are the best starting places for any project.

4. Ask for advice. Even if your friends or family members are not designers, they still know what they like and their perspective is still important. We are often so close to our work and seeing it through a fresh set of eyes can be helpful. Your friends and family might also really enjoy giving their feedback and appreciate that you value their point of view. As in any critique, remember not to take it personally. It is important for a designer’s ego not to get in the way of their work… your goal is just to make the most effective design possible.

5. Keep your eyes open. You are not the only one trying to come up with fresh new ideas. Our world is flooded with design, some of it good and some of it not so good. Try to be aware of what makes an idea work and what makes it fail. Collecting design materials is also a good way to have reference material always on hand. I collect stuff all the time. I might find a scrap of paper, which gives me a great idea for a composition or a font that would be great to use in a project. A guilty pleasure of mine is dumpster diving in recycling bins. You might look pretty strange doing it but you can often find some relics that make it worth it. Any time you are drawing a blank you can rummage through your findings and you are bound to be struck by something cool.

Looking at art and design is so important. There is no way to make something original before you know what else is out there. Thanks to copious design blogs there is never a shortage of inspiring work to ogle. Going to museums and galleries is also important. Design and fine art are linked in so many ways.

Originally posted by Matt Delbridge.

[emumarketing]

Learning Outcomes: From Print to Web

I was hired by EMU Marketing last summer as a graphic designer for posters and advertisements. Before I even made it back to campus for fall term, I was  given 3 large-scale projects to work on. It was an exhilarating experience designing for the entire student body.

The deadlines came quickly and I had a lot to learn but the environment was so supportive and creative that I enjoyed every second of it. My skills improved quickly and I began to get accustomed to the faced-paced environment.

I felt like I was earning my keep by pumping out print marketing, however I noticed the incredible web development my programmer co-workers were creating. I wanted to expand my knowledge and apply my graphic sensibility to websites but I didn’t know any HTML or CSS. To my surprise, I was encouraged to explore web development and my programmer co-workers patiently helped my to learn the basics of coding. Right away I was given a web design project where I was able to learn on the job. I have since designed and coded 2 websites from scratch and I feel confident in my skills. Through my transition from print into web I learned a few things that might be useful to others:

1. Take the time to learn it right from the start. As a firm believer in learn-by-doing, I can honestly say I rarely read instruction manuals but HTML is different. I strongly recommend working through tutorials when first starting out. HTML Dog was my most valuable resource. I work through their HTML and CSS basic through advanced tutorials in a day or two. I know it’s a pain in the ass to sit through the boring stuff but it’s so important to feeling comfortable while you are coding. You will probably need to refer back to HTML Dog pretty often as you start out, but it will begin to feel natural after a while. Soon you’ll be writing code in your sleep.

2. Keep your code clean. I was told this when I first started but I didn’t really know what this meant. I shrugged my shoulders and started pumping out lines of code, never stopping to indent, often creating redundant or useless tags. I began looking at other people’s source code and noticed how nicely indented it was and how much cleaner it was. I still didn’t really change the way I worked and I paid for it when it was time time to validate. It took forever to sift through the errors and I ended up wasting a lot of time.

3. Ask questions. There’s something to be said for figuring stuff out yourself but you might be able to save an hour with a quick answer from someone who knows more than you do. Forums are also a great way to get help. I often google a question and chances are someone has asked the same thing on a forum somewhere out there

4. The user is always right. It is often hard for people who come from a visual background to understand that their graphics will now function second to the usability of a site. A lot more goes into a site than I had previously thought. I had to think about how long the page would take to load, how search-able it is, and the over all functionality of the design.

5. Communicate with the programmer. In my case I was responsible for the basic design but the programmer often ends up having to do the heavy lifting. Making their job as easy as possible is a good idea. Talk with them before about what the site has to do and let them look over your code to make sure they understand everything. I learned a lot from shortcuts they told me about and cleaner ways of coding stuff.

I was given an incredible opportunity through EMU Marketing. Not many novice web designers are able to learn on the job from such an incredible staff. Because of what I learned at EMU Marketing, I have been approached by clients to develop web pages and manage their blogs.

Originally posted by Matt Delbridge.

[emumarketing]

WordPress for student groups: Part 2-Installing WordPress

Installing WordPress on your own server is normally a simple, quick and easy process. Unfortunately installing WordPress on the U of O server is not. But you can simplify this process by following these directions.

NOTE: shell.uoregon.edu is now sftp.uoregon.edu

Special Thanks

Several people have contributed to make this process simpler for everyone.

Tristan Waddington (for writing Easy PHP on shell.uoregon.edu)

Aaron Parecki (who solved issues with database connections)

Jeremy Blanchard (who wrote this script that installs WordPress for you.)

Installing WordPress

Mehtod 1-Script Install

As mentioned above Jeremy Blanchard wrote a script that will compete all of the steps for you. You should follow all the steps in his post about using the script.

Method 2-Manual Install

Tristan wrote this article on getting all of the components of WordPress working on shell you can follow his directions here This is a manual setup and is difficult and time consuming and should only be done if you want the learning experience.

Post Installation

After the script is completed running you will need to visit http://uoregon.edu/~YourDuckID/ see a screen which asks you to name your blog and provide an email, Triple Check this email address it is where all the administrative emails from the blog are sent. After this screen you will get a username and password for the admin.

Copy down the password and login to WordPress.

at the admin screen at the very bottom left corner click on profile and then change the password to something you will remember. The password option is at the very bottom. Save these changes.

Create a username and password for yourself

After you have changed your password click on the users tab on the left menu bar. Then click “add new”. Enter all of your information and give yourself a role type of administrator.

Make your website work at YourGroupName.uoregon.edu

One issue with the script is that it make the address of your website work only at http://uoregon.edu/~YourDuckId. if you want to make your website work at YourOldWebsite.uoregon.edu.

For example when I setup the ASDA blog initially it only worked by going to uoregon.edu/~asda. We have been advertising our website as asda.uoregon.edu. Follow these steps to fix this problem.

Click on the settings tab

change the blog address and the website address to YourOldWebsite.uoregon.edu

when you hit the submit changes button you will receive and error message. THIS IS OK. Keep reading the directions.

To fix this new problem open up your favorite FTP client (I’m using Fugu on a mac.) and login to shell.uoreogn.edu navigate to the public_html directory. you will need to edit the .htaccess file. This file is hidden by default so you will need to show hidden files in your FTP Client.

Change all references to ~YourGroupName to YourGroupName.uoregon.edu and you should be good to go.

Upgrade WordPress

Unfortunately the U of O servers have issues when trying to use the awesome upgrade automatically feature that WordPress has. This means that to upgrade you need to follow the WordPress upgrade instructions.

The WordPress forums are a great place to look for help with your upgrade if you don’t know where to start.

Remember blogs that do not upgrade will be and and UO will shut down your blog if someone hacks into it.

So now what?

Now that you have wordpress installed you can look at different themes and plugins to enhance it. If you need help there is a great website called wpbeginner that has an awesome amount of information to help you get up and running.

Originally posted by Patrick Arlt.

[emumarketing]

The Slice Tool : Best thing since sliced bread?

What the slice tool does? The slice tool is a tool that connects into save for web. You slice your docuemnt into peices and then each slice is saved as a separate image. This is a huge time saver when you are coding a website from a Photoshop Design.

My Process

I’m going to use the new website for Scheduling and Event services for this example.

The goal is to

A 10×10 PNG for the transparency in the upper right corner.

A repeatable background gradient in PNG format for all the menu bars and the footer

A JPG Image for the rooms slideshow.

A PNG for the live chat system which is being integrated easier.

We are going to do all of the above from 1 set of slices, Here we go.

Hide all Unnecessary layers This step is necessary for our first goal. Because we cant get the transparency for the PNG with the background image there.

The Slice Tool Lets make our 10×10 PNG. Select the slice tool or hit “K” (the default hotkey) from the command bar at the top select fixed size from the drop down menu. Then enter 10x10px. Now whenever you click with the slice tool you will make a new 10×10 image when you go to save for web.

Click somewhere in the transparent area to make our slice.

Set the slice tool back to normal and slice an area out of the menu bar for our gradient background.

Slice out the other areas of the document, the JPG image for the slideshow and the PNG placeholder for live chat.

Here is a screenshot of my final set of slices.

Save for Web

Next go to File>Save for Web. This screen looks a little different then it normally does but now you can select Your individual slices and tweak their settings. Just click on a slice and adjust the options like you normally would. You can double click a slice to give it a name.

When you hit the Save button it will save a folder full of images in the specified directory. from the Slices menu at the bottom select “All User Slices” to export only the slices you have physically made as images as opposed to every slice in the document even automatically generated one.

Below is a screenshot of my new images folder with all images in one folder in the right format, and all in one step.

Originally posted by Patrick Arlt.

[emumarketing]

WordPress for Student Groups: Part 1-What is WordPress?

What is WordPress? Wordpress is a free blogging software that is used by hundreds of thousands of blogs around the world. CNN, The New York Times, Ebay and even the British Prime Minister all use it to help them connect and communicate. It prides itself on being easy to use and maintain and being very flexible.

The EMU Marketing blog is powered by WordPress, as are the blog websites for the J School and the Law School.

What can it do? The best part about WordPress is its flexibility. I run and maintain the blog at ASDA and the whenever I make a new post it automatically sends emails out to a mailing list. People can subscribe to the mailing list right on the website to. You can use WordPress to pull photos from your groups flickr account and post them on your blog as well. You can also add pages to your blog for information about your group or any annual events your want to promote.

Why is it great for my student group? Its great because it is easy, it keeps your group members up to date on what is happening with out hassle once the installation is complete you don’t have to know ANY code to create content for the site. You can upload photos and video and place them in posts with ease.

So how do I get started? I’m writing this series with the assumption that whoever is following htem knows how to do the following

SSH into shell.uoregon.edu and execute commands.

Use an ftp client to connect to shell.uoreogn.edu.

Knows how to code HTML and CSS

This is a basic skill set that any one who has taken CIS 110 would have. If you cant find anyone to do this leave a comment on this article and I can help you get it setup and running.

Future Articles

Part 1-What is Wordpress?

Part 2-Installing WordPress

Part 3-Extending WordPress. Themes and Plugins

Originally posted by Patrick Arlt.

[emumarketing]

Obama Stencil Effect

Brief Background My main source of insertion for the Inauguration Poster came from the Shepard Fairey “Hope” Poster we have all seen so much of. This is a quick tutorial on how I created the stencil effect for the poster.

Quick Steps

Select background (expand and smooth your selection).

Fill with white.

Black and white (not an adjustment layer) your photo and up the contrast.

Merge the photo w/ the background.

Make your photo a smart object.

Apply Gaussian Blur and Cutout(In that order).

Tweak both filters (every photo is different).

Live Trace it in illustrator to and color each shape.

Expand and Tweak the trace.

Detailed Steps Select background (smooth the edges out) Using your favorite selection tool to select the background of your image. Smooth out your selection by going to Select>Refine Edge and use the smooth slider to smooth out your edges.

It also helps to contract your selection a bit this creates a darkened border around your subject.

Fill with White Fill your Selection with white.

Black and white (not an adjustment layer) your photo and up the contrast

You have to use the Image>Adjustment menu for this step because you want the filters applied in later steps to affect the edited version of the image and not the original. Not the best practice to completely destroy your image but a necessary one.

Merge the photo w/ the background Fairly self-explanatory when you apply the filters to the image you want to make the entire image reside on one layer.

Make your photo a smart object Go to Filters>Convert for Smart Filters to make your image a smart object this will let you adjust filters to get the best image later.

Apply Gaussian Blur and Cutout(In that order) I used about 4px Gaussian blur. For the cutout I used 3 levels with 0 edge simplicity and 3 edge fidelity. If your image doesn’t have enough detail and is muddy, try taking down Gaussian blur. If your image has to much detail for you take the blur for edge simplicity up.

Tweak both filters (every photo is different) If your image doesn’t have enough detail and is muddy, try taking down Gaussian blur. If your image has to much detail for you take the blur for edge simplicity up.

Live Trace it in illustrator to and color each shape. Open your image in Illustrator and release the crop area and delete it. Also get rid of any clipping masks ect. Then go to Object>Live Trace>Tracing options. You can use my settings below or find your own.

Expand and Tweak

Live Trace is hardly ever perfect, by expanding your trace you can tweak individual paths. Go to Object>Expand and then click OK. Now you have all the individual paths for your tweaking pleasure.

Originally posted by Patrick Arlt.

[emumarketing]

Learning Outcomes: Interacting with the Flickr API using PHP

Many of the sites we build feature a small photo gallery as part of their design. Rather than roll our own photo management solution, we opted to integrate Flickr into our custom site framework.

The Flickr API supports several request and response formats and allows access to nearly all of the functionality of the web interface. REST and Serialized PHP were the most straightforward formats for our purposes. The REST format allows us to call API methods to request photos and associated meta data using simple HTTP GET actions. The responses come back in serialized PHP format which you can convert into an array using PHP’s unserialize() function.

Before you can access the Flickr API, you’ll need to apply for an API key.

The first step in making use of Flickr’s services is to write a function that will allow you to easily make calls to API methods. The function request() will take an array of parameters specifying the API method to be called and it’s required arguments. It will return an unserialized array containing the response.

function request($params){  $api_key = '81e7e11aeac57ac668609d316f6388ce';  $url = 'http://api.flickr.com/services/rest/?' . 'api_key=' . $api_key . '&format=php_serial'; foreach($params as $key => $val){ $url .= '&' . urlencode($key) . '=' . urlencode($val); } $resp = file_get_contents($url); return unserialize($resp); }

All you need to do to make a request is format the $params array and pass it torequest(). To get the user id for a Flickr user, call the flickr.people.findByUsername method:

$params = array('method' => 'flickr.people.findByUsername', 'username' => 'hs0j'); $user = request($params); $print_r($user);

$user contains the response from Flickr.It contains the following data:

Array ( [user] => Array ( [id] => '30180364@N06' [nsid] => ' 30180364@N06' [username] => Array ( [_content] => 'hs0j' ) ) [stat] => 'ok' )

From here, you can get a list of photos for the user by calling flickr.people.getPublicPhotos:

$params = array('method' => 'flickr.people.getPublicPhotos', 'user_id' => $user['id'], 'per_page' => 20); $photos = request($params);

Now that you have a list of photos, you can iterate through the elements of$photos['photo'] and build URLs for each photo using build_photo_url(). For information regarding the photo URL format, see Photo Source URLs.

function build_photo_url($p){ return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] . '/' . $p['id'] . '_' . $p['secret'] . '.jpg'; } foreach ($photos['photo'] as $p){ echo ''; }

Flickr allows you to specify a number of image sizes when building photo URLs, making it easy to create a gallery of thumbnails that link to either a greybox or full size photo page. These sizes are explained in detail on the Photo Source URLs page.

The code here can be expanded upon to support all of the other methods that are detailed in the API Documentation. Adding support for the other methods you find useful and writing helper functions that tie several calls together will leave you with a very functional and reusable Flickr class.

Originally posted by Josh Yaganeh.

[emumarketing]

Reactive tree caching

 APC is an amazing tool for increasing the performance of PHP scripts. The framework we’re developing makes extensive use of caching to store complex data structures that would be too resource intensive to rebuild often. A lot of template engines produce static files to cache the output of resource intensive database driven systems. This works great but we wanted more flexibility.

Building on the features of the first XTML template engine, we parse markup into a tree of objects instantiated from classes defining the behavior of the various elements. To render the document to XHTML, we recursively traverse the tree and each object is asked to generate a string representation of itself.

For example is represented in PHP as something like this:

xtm_google_map Object ( [ns] => "xtm", [tag] => "google-map", [attribs] => Array ( [address] => "1501 Kincaid St, Eugene, OR 97403", [height] => 300, [width] => 400 ) // etc... )

And when the object renders itself, the script accesses the Google API to get the URL for the map image. This is outputted as an image tag in XHTML.

This works pretty well but until recently it has had some limitations. PHP’s serialize/unserialize functions get slow with very large strings so requests to heavy pages where complex document trees needed to load weren’t as snappy as we would like. To overcome this problem our new template objects store local caches that flush when new content is added to them. The effectiveness of these local caches is monitored and used to optimized the document trees by storing inactive segments in separate cache sets. These segments are only loaded back into the active document tree when an element they contain is accessed.

Bearing in mind that the greatest strength of the system is the ability to efficiently output content that updates with varying frequency, I ran a quick performance comparison with some static markup from the Ticket Office home page. I used ab with 50 concurrent connections over 30 seconds against our development environment. The following results show a 53% improvement to requests per second over rebuilding the document every request and a 17% improvement over caching the full document tree:

No caching:

Time taken for tests: 30.34176 seconds Complete requests: 4814 Failed requests: 0 Write errors: 0 Total transferred: 33388958 bytes HTML transferred: 32218184 bytes Requests per second: 160.28 [#/sec] (mean) Time per request: 311.946 [ms] (mean) Time per request: 6.239 [ms] (mean, across all concurrent requests) Transfer rate: 1085.63 [Kbytes/sec] received

Simple caching:

Time taken for tests: 30.056 seconds Complete requests: 6219 Failed requests: 0 Write errors: 0 Total transferred: 43165699 bytes HTML transferred: 41649865 bytes Requests per second: 207.30 [#/sec] (mean) Time per request: 241.197 [ms] (mean) Time per request: 4.824 [ms] (mean, across all concurrent requests) Transfer rate: 1405.13 [Kbytes/sec] received

Optimized caching:

Time taken for tests: 30.14062 seconds Complete requests: 7324 Failed requests: 0 Write errors: 0 Total transferred: 50898857 bytes HTML transferred: 49111106 bytes Requests per second: 244.02 [#/sec] (mean) Time per request: 204.902 [ms] (mean) Time per request: 4.098 [ms] (mean, across all concurrent requests) Transfer rate: 1656.06 [Kbytes/sec] received

Originally posted by Paul Wells.