Here's a short presentation I made on Content Governance (or Management). The video is pretty wordy, so I'll let it do the talking. Enjoy!

Some Thoughts on Web Standards

I’m going to try to be as concise about this as possible, since I’ve done extensive research into the area (and come across a few of these articles) before. I don’t have a smartphone or any type of mobile device, so in preparation for an early class on User Experience and Interface (UX/UI) for mobile applications, I looked into a lot of the conventions and elements that are taken for granted on smartphones, as well as the reasoning behind why they are the way they are. But I’ll get to that later. Here are my thoughts on the questions and the articles:

What are Web Standards, and why are they important?

Web standards are a series of expectations in user interface on the web. These are the things that are placed in similar, um, places across most web pages. If you want to see a website’s logo, you look to the top left corner. When you mouse over a hyperlink, if changes color (or style, or underlines, or something like that). These are all things that we assume will happen every time you open a website. Now, these types of things are important because they allow the user to get a handle on the site pretty quickly. Look at it this way; imagine if you were doing research across a couple of books. One of the books has a table of contents in the front, and you get used to using that to find chapters. But then the next book has its table of contents in the back, and every time you go to look up a chapter, you mess up and go to the front of the book by accident. It’s a pain in the butt to have to relearn basics, and web standards help prevent that.

What do I think of web standards?

I think that web standards have their place. They’re obviously a very important for usability and continuity, but quite frankly, the Internet that Jakob Nielsen describes is pretty bland. If one hundred percent of a website’s elements were standardized, there wouldn’t be any room for interesting design, or more importantly, innovation. I know he sort of calls off his dogs and admits you can’t standardize everything, but even the degree he wants standardization to is a bit harsh. Personally, I think the makeup of the web is at a pretty good place right now; a lot of sites are standardized (I’m lookin’ at you, social media), but there’s enough difference in other parts of the web to keep it interesting. And enough to give room for new ideas, maybe even future standards, to arise.

I Got a Website

I do! It's at www.gregrava.com!

Drawing in SVG, or What I Did With My Spring Break

Today, or rather over the course of the past week, I learned the value of knowing some javaScript in web design. I don't know much (right now), but even the little bit I know at least gave me the confidence to fiddle around with some scripts and jQuery to try and make it work.

So what was I trying to do? Well, this: Codrops Demo. Or this: Vox media review of the Polygon site

I thought that maybe I could have my little whiteboard wanderer character be drawn into the page, and have the rest of the page fade in around him. Seemed simple. Until I fell down the rabbit hole.

The fun thing about that Codrops article is that they don't really tell you how it's all done. They tell you what the effect is, how it's used, and where you can see it, but it's more of a "look how cool this is" than a "let me show you how to do that."So, I found myself picking away though the source files, which look something like this:

Which, after some research, this makes sense to me

And that's just the HTML source, mind you. There were three JS sources and three CSS sources to deal with as well. It was a bit of a maze for me. It's not that it was confusing, I understand the way that JS works, but there was just a lot for me to process and untangle. After I picked around through it for a bit, I decided to see if someone else had already. So I poked around the internet and found this article:
Jake Archibald Animate Line Drawing
Which was exactly what I was looking for. It was all about using CSS styles and JS to draw SVGs, specifically how. Essentially, you create a dashed line along the path of your drawing, with the spaces between the dashes as big as the dash itself. Then, you just shrink the gap, giving the illusion of the line being drawn.

Seeking further clarification, I found an article by the same author, further explaining the technique:  24 Ways animating vectors. This article was a little more recent, and easier for me to understand. After I worked my way through the whole article and thought I had a grasp of the concept, I prepared to buckle down for some JS coding. I would need to open up my SVG and convert it to line points, then plug those points into the html. Using a javaScript function, I would tell those lines to "draw" by adjusting their stroke offset (using a 'for' loop), and then tweak it till it looked nice.

And that's when I noticed a link to this little gem at the top of the comments section for the LazyLine Paitner Method. Now, generally I don't like to associate myself with something labeled "Lazy," but this was a prebuilt JS function that did everything I was trying to do.

So, I downloaded the demo file and began to pick that apart. It didn't take too long to get my little shape being drawn up in HTML, though it did take a good amount of tweaking to get it right (I'll post a tutorial on it later, specifically one geared toward people with little JS experience). Here's what I ended up with:

http://mywebspace.quinnipiac.edu/gtrava/gregRava%20Site/index.html.

Until next time!

Website Effects

I like cool websites. I don't find them too much on my own (most of my web browsing consists of reading articles, which tend to exist on pretty straightforward sites), but when I do, I make note of them. So it was that bookmark folder I looked in as I began to plot out my portfolio site.

After some searching and a little help from a friend, I came across Codrops. The rest of my day was completely absorbed. I have a tendency to go on tutorial binges, and this was one of my most productive. I don't want to build my entire portfolio site using material from Codrops, but it might happen.

So here's what I found.

First up is the first tutorial on the site: a stack gallery. It's a simple, but fun, transition for a gallery that takes the images and shuffles them around. Maybe it just appeals to the part of me that likes playing Magic, but I think it' an interesting effect to fancy up a part of the site that would otherwise just have a boring old transition. I'm not sure that this is necessarily what I need for my site; it doesn't necessarily fit in with the whiteboard theme.

The demo of the effect

Next is the so called "YouTube menu"effect. This is a tidy way to condense categories, and it's something I might utilize on my gallery tab (clicking gallery would cause the different categories to expand out in this way). When it's condensed, the bar looks very clean, and as long as you have the room for the expansion, it can transition nicely.

The codrops guy really likes green

Then there's my personal favorite, the SVG Drawing animation. The first thing I thought of when I saw this was having my little whiteboard wanderer logo be drawn in. This is by far the most confusing tutorial for me so far; it uses an SVG, CSS, and some javascript. All things I'm fairly comfortable with, but things that are going to require a lot of work on my end. I'm a little concerned about browser limitations when it comes to svg and css transitions, but that's a bridge I'll have to cross soon.

The animation effect mid-transition

The last effect I'm considering is the Off-canvas navigation. It's an odd effect, but I can see it playing into the whiteboard aspect. I'm just concerned that having my navigation not always on screen will have a negative effect on the website itself. I've gotten a mixed bag of answers from people about if they like it or not; as long as I make the navigation pull-up an obvious thing, I think it can work. I've tried to reflect this in my wireframe sketches.

the scale back and rotate object. it could give a cool effect as if it were a whiteboard!

Either way, I've got my work cut out in getting these effects to apply to an actual site! Stay tuned!