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:

CSS Tricks for Smart Quotes and Tooltips

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

The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).

But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.

Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.

So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.

So, let’s rock.

CSS Tricks for Smart Quotes and Tooltips Read More

CSS Counters – The Right Way to Organize Your Ordered Content

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

It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.

But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.

Well, let me tell you a secret: They are doing it wrong.

Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).

A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!

Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D

So, let’s rock!

CSS Counters – The Right Way to Organize Your Ordered Content Read More

How to Customize Twitter Search and Profile Widgets

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

So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.

They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).

Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.

So, let’s rock!

How to Customize Twitter Search and Profile Widgets Read More

10 Tips to Boost Your HTML Forms Performance

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

Sometimes we get so used to doing things one way that we forget a little and important thing: to improve. We get so involved with all this CTA stuff that we forget other important things, like the contact form that comes after the pretty button.

Our task today is to improve our form, to get better conversion rates, and maybe learn something from it.

We will be talking about conversion, code, and design, in an easy and practical way.

So, let’s stop talking and rock some forms.

10 Tips to Boost Your HTML Forms Performance Read More

Getting Smarter Code with PHP Variable Variables and Variable Functions

Posted in Coding, PHP, Tutorials • Posted on 29 Comments

Oh, variables. Who doesn’t love them? They are such nice guys, you know. When you need something, just call $something and your value is there.

But something really cool is that you actually don’t need the name of the variable. You can use other variables to access a value of one variable.

For example, let’s say you have two variables $jude = "hey" and $hey = "jude". If you echo $$jude $$hey(yeah, double “$”) your output will be “hey jude”.

But, as you might be thinking it is not just about variables. You can name dynamic functions, methods, arrays, and almost anything you want to.

This time we will see some uses for it, with arrays, functions, classes and how this technique can help you write better code.

So, let’s rock!

Getting Smarter Code with PHP Variable Variables and Variable Functions Read More

jQuery Plugin: Table of Contents with Smooth Scrolling

Posted in Coding, JS & AJAX • Posted on 39 Comments

Hey guys, have you noticed that pretty box on WordPress codex that gives us a preview about what we can see on a page? So, I haven’t seen too many blogs use this kind of feature and it is really useful for our readers, since they can just skip to the content that they are interested in and avoid wasting time. Wikipedia has a table of contents that makes it easier for readers to skip around, right?

I’m not the very first to do something like this with jQuery. But our goal in here is to develop a complete jQuery plugin, from start to finish, with options, and that is easy to customize. And, of course, something that I hope is useful to you

So, let’s rock!

jQuery Plugin: Table of Contents with Smooth Scrolling Read More

WordPress Wp_Nav_Menu with Icons and Active Item Highlight

Posted in HTML & CSS, PHP, WordPress • Posted on 15 Comments

WordPress is a great tool, for sure, but as many other CMS’ it drives us into an “all standard” way of thinking, that is, you design things thinking that every element has to be identical to his brothers, same color, same style, same size.

How many WordPress sites with pretty menu icons do you know (with wp_nav_menu, not “static” menus)?  How many of them use a different color for some categories? Well, these little things make a big difference.

This time we will learn a simple way to customize our WordPress menu, without losing its wonderful admin options. We will be doing:

•   Home link in our wp_nav_menu that always gets current blog url
•   Customize each menu item as you want
•   Put pretty icons in our menu
•   Active item highlight

From now on, it is useful to have a little understanding about what wp_nav_menu is, and if you have a blank WordPress install, it is time to play with it ;)

So, let’s rock!

WordPress Wp_Nav_Menu with Icons and Active Item Highlight Read More

How to Create a Web Spy with a PHP Crawler

Posted in PHP, Tutorials • Posted on 52 Comments

Crawler, spider, bot, or whatever you want to call it, is a program that automatically gets and processes data from sites, for many uses.

Google, for example, indexes and ranks pages automatically via powerful spiders, crawlers and bots. We have also link checkers, HTML validators, automated optimizations, and web spies. Yeah, web spies. This is what we will be doing now.

Actually I don’t know if this is a common term, or if its ever been used before, but I think it perfectly describes this kind of application. The main goal here is to create a software that monitors the prices of your competitors so you can always be up to date with market changes.

You might think “Well, it is useless to me. You know, I’m a freelancer, I don’t have to deal with this ‘price comparison’ thing.” Don’t worry, you are right. But you may have customers that have a lot of competitors they want to watch closely. So you can always offer this as a “plus” service (feel free to charge for it, I’ll be glad to know that), and learn a little about this process.

So, let’s rock!

How to Create a Web Spy with a PHP Crawler Read More

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Posted in HTML & CSS, Web Design • Posted on 40 Comments

I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.

You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.

This time we will talk a little about frameworks and other tools, like generators and templates.

So, let’s rock.

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates Read More

Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources

Posted in Inspiration • Posted on 31 Comments

This time we will review some helpful resources for designers, how you can find them, and how can they help you.

Have you ever thought that every day, while you are busy doing your work, there are a lot of people doing almost the same thing as you? And they are releasing it. For free.

And sometimes we just forget all this stuff and lose a lot of time doing things that just didn’t need to be done. Someone else has done it for us. Why should you start from scratch if you can get some cool things and just make them better?

So, this is a post with a lot of links, and with my opinion about many of them. In short, we will be talking about:
• Creative photos collections
• Cool Icon packs, Buttons & Menus
• Professional Font faces
• Useful patterns, brushes, backgrounds, textures
• Templates and other miscellaneous elements
• Online generators and other tools

So, let’s rock!

Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources Read More - unknown - unknown - US