Rochester Oliveira

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

Web Design Using Grids: Tools and Inspiration

Posted in Tips, Tools, Web Design • Posted on 14 Comments

When I started this web designing thing all my work just didn’t look “professional”. It was pretty, nice colors, nice fonts, nice bevel/emboss effects…but something was annoying and I didn’t know what.

Then I found out.

Grids are one of the smallest differences between good and great design. It is quite easy to find a way to realign aspects of the design that give it a completely different look. Of course we have also other spacing adjustments but when you put things inside grids everything tends to look much better.

Today we’ll find out together why they make such a difference, who is doing it right, and which tools you can use to have a better grid.

Web Design Using Grids: Tools and Inspiration Read More

12 Useful WordPress Coding Snippets And Hacks

Posted in WordPress • Posted on 22 Comments

We all love WordPress. What makes more and more people fall in love with it is how easy it is to customize. With a few lines you get some cool customization with all those filters, actions and hooks.

WordPress 3+ blewour minds with cool new features. But sometimes we need something quite different from the default. That’s what we’ll be talking about today.

We’ll see some useful functions and hacks to get even more from WordPress.

So, let’s Rock!

12 Useful WordPress Coding Snippets And Hacks Read More

Create Your Own Premium Membership WordPress Blog – Part 1/3

Posted in Coding, Plugins, Tutorials, WordPress • Posted on 46 Comments

Who doesn’t want to earn money from blogging? I mean, sometimes you have shortages, sometimes comments let you down, payment is not THAT good. But you know, it’s still better than real work, right? (Troll’s comments in 3..2..1..)

So instead of spending a few bucks in order to get a premium membership system, why not create your own? And you can also learn a little bit about WordPress. Big deal, isn’t it? And you will be amazed at how easy is to build such great feature.

This is our first post from 3 and we’ll be talking about user roles, register, show / hide content based on user’s role.

So, Let’s Rock!

Create Your Own Premium Membership WordPress Blog – Part 1/3 Read More

1stWebDesigner’s Life – Your New Must-Read Webcomic. What do you think?

Posted in Tips, Web Comics, Web Design • Posted on 33 Comments

After enjoying a good weekend it’s good to start your week reading some funny things, right? That’s why we bring to you our brand new webcomic: 1stwebdesigner’s life. The comic will not just be about common situations every web designer encounters, but we also want to give you some ideas about how to deal with those situations.

We’re inspired by many web comics and funny websites out there, like A Programmer’s Life, FMLife, Vida de Programador(pt-br), WebDesignerDepot’s Comic of the Week. But we surely won’t steal anyone’s idea. Everything written here is about things that I have experienced or reader’s submitted ideas :).

Oh, Tyron Love is the amazing South African cartoonist that brings this idea to life.

1stWebDesigner’s Life – Your New Must-Read Webcomic. What do you think? Read More

Simon’s Google Doodle – HTML5 + JS jQuery Game

Posted in Coding, HTML & CSS, JS & AJAX • Posted on 24 Comments

Dude, you’ve heard a lot about Google doodles haven’t you? What about that Pacman one? It is just addictive. Company owners know how a funny game and unlimited search powers could be dangerous for productivity. And how it can be a marketing boost. The most amazing thing is that we can create our own addictive HTML game. Actually, this is why we are here today. With this tutorial you’ll see how to use some of JavaScript and HTML capabilities to build simple yet funny games.

So, let’s rock!

Simon’s Google Doodle – HTML5 + JS jQuery Game Read More

Save Time Using Photoshop Smart Objects

Posted in Tips, Tools, Web Design • Posted on 18 Comments

Those who are familiar with CSS and PHP know how good it is to only change one line and see all changes propagate through the elements you’ve changed.

Well, today we’ll see how to do something similar to this with Photoshop, so when your client asks you to change your background from 90% black to 92.37% black you can do it in no time.

Save Time Using Photoshop Smart Objects Read More

4 Money Saving Tips That You Should Follow

Posted in Freelance, Tips, Web Design • Posted on 12 Comments

I know that you are really good in your field. Design, development or anything you do, I know that it is good, and you’re always trying to get better and earn a higher paycheck.

Well, you know, you don’t have to be a finance expert, but money management is really important since if you don’t do it, it doesn’t matter how much you make, you’ll never have enough for tomorrow.

This is why we will be talking about money management. We’ll see 4 important tips and some concepts that will help you in your life about things that are even against common sense (like “Profit is not that important”).

So, let’s rock!

4 Money Saving Tips That You Should Follow Read More

jQuery Plugin Development: Hover to Reveal Masked Password

Posted in Coding, HTML & CSS, JS & AJAX • Posted on 17 Comments

We talked about how to improve your HTML forms performance a couple of days ago. There we covered a pretty controversial topic “Don’t mask your passwords”, discussing how bad masking your passwords could be for usability.

At this moment, we basically have two options: mask password field and don’t ask for any feedback, or show password field as text and potentially decrease security.

This is why I think a hover revealing password could be a really good alternative: You can increase your security, and if you are unsure about what you’ve typed just go and hover over it.

So, what we will be doing today is a jQuery plugin to do that, and additionally, we will have a behavior pretty similar to what many mobiles does, where we can see the last character for a couple of seconds. This is a good chance to learn more about plugins, dynamically generated content, and some good coding practices.

Moreover with this technique we could apply different effects and a lot of variations since all this things are based on non-obtrusive and almost only decorative javascript.

So, let’s rock!

jQuery Plugin Development: Hover to Reveal Masked Password Read More

17 CSS/HTML Effects with Cross-Browsing Alternatives

Posted in Coding, HTML & CSS • Posted on 51 Comments

Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser.

You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?

Thus, our point here is to collect some cool CSS effects that you should be using:

• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles

So, Let’s rock!

17 CSS/HTML Effects with Cross-Browsing Alternatives Read More

WordPress Plugin Development – Relate Posts as a Series Part 2

Posted in Coding, PHP, Plugins, Tutorials, WordPress • Posted on 16 Comments

So, we started our dive into WordPress plugin development with the first part of this tutorial where we talked a little about planning, basic plugin structure, custom post types, metaboxes and how to add custom functions to WordPress’s defaults actions.

Today we will talk a little more about metaboxes and jQuery, shortcodes, and front-end functionality.

All these things with a pretty practical example of how to make a plugin that will relate posts as a series.

So, let’s rock!

WordPress Plugin Development – Relate Posts as a Series Part 2 Read More
54.82.6.247 - unknown - unknown - US