Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Author: djbrensinger Page 31 of 50

Useful plug-ins from Milwaukee WordPress Meetup

By

On April 29, 2014

In Programming, Web Development

WordPressWhat is a WordPress HelpDesk session? Beginners and more experienced WordPressers come to share and help each other with WordPress questions. At the Milwaukee Meetup, we shared useful plug-ins that make managing a WordPress site and its security better.

Plugins for Managing Your WordPress site

  • How can your replace your media files easily? Enable Media Replace lets you quickly replace a file in your WordPress Media library. Without it, you have to find the file, delete it and re-upload the new file. With this plug-in, it is much easier to replace the file without the extra work.
  • With WordPress, you have three choices for an image gallery. You can use WordPress’s default gallery, build your own or use a plug-in. Our host, Bard Parbs, uses WordPress’s default gallery with custom CSS for his projects. He recommended EnivraGallery, a premium plug-in for people who want a responsive and easy to use WordPress gallery.
  • Metadata lets you describe your site that is readable and friendly to search engines. You can use Add Meta Tags to help the search engines to better categorize your website and increase the chances of the people who are looking for your site can find it.
  • Most websites need forms to gather information from their visitors. You can use Contact Form 7 or Gravity Forms. Contact Form 7 is simple and flexible. If you need more advanced forms, than Gravity Forms, a premium plug-in, lets you build them with ease. Depending on your needs either plug-in can help you get started with forms on your website.
  • Sometimes your website can be slow. WP3 Total Cache can help to improve the speed of your website and your visitors experience. You can also try WP Super Cache which provides your users with static html files instead of the WordPress PHP files. PHP files can take more time to load than html files. WP Super Cache shows your visitors the cached or original page depending on the visitor to help make their experience better.

Security Plugins

We had a question on how to secure your WordPress website. Brad mentioned that the WordPress Codex has an article explaining how to harden or secure your WordPress site. He talked about 3 additional plug-ins that people can use:

  • Brute Protect protects your WordPress site against brute force attacks. After too many failed login attempts on your site, BruteProtect saves the IP and blocks it from your site and others who use this plug-in.
  • Do you have clients who are terrible with remembering or using strong passwords? Clef is the alternative log in that you need. It uses two-factor authentication to enable you to log into your WordPress website. No passwords are needed.
  • WordPress like other websites needs both security and backups. Backups help you to recreate your website if your site gets damaged by viruses, malware or something you did. VaultPress provides both security and backups for your WordPress. This is a premium service. They have different plans and pricing to match your needs.

Brad also suggested Securi. Securi is a complete Website Security service. They check your website, monitor it and provide removal of malicious code. Securi has plans for people with one website to multiples.

When you setup your WordPress site, remember to follow the recommendations on securing your site. Be choosy about the plug-ins you add to your WordPress website. Not all plug-ins will fit your website’s needs. Sometimes, you’ll want to pay for additional features that a premium plug-in will provide. Do you have any plug-ins to add?

4 Tips for Improving Your Web Design

By

On February 25, 2014

In Design, Web Development

Art PencilsDesign is problem solving. Whether you are creating an app or a website, you need to focus on solving a problem, not just making it look pretty. When you design, you need to make an impression, create something usable, solve the right problems and improve when your design has flaws.

 

The following tips can help you improve how you design.

Make an Impression

You have 3-5 seconds to make an impression. If you don’t, your website visitors will leave. You have to make design decisions that convince your visitor to stay. Designing for the 3 Second Rule gives your 5 tips that you can do to make certain that your design will have impact.

Design for Activities, Not Users

Most people go to a website to do something: read, watch a video, or post pictures. You need to consider what they plan to do on your site. When you focus your design on a person or group of people, you can create a web site or app that has too many features. By focusing on activities instead of users, you can build a better website. In Stop Designing for “Users”, Mike Long explains why designing for activities is a better for your design.

Apply App Design to Website Design

Can you use app design to create better websites? App design can provide a source of inspiration and guide for solving certain problems. Kayla Knight explores how you can apply app design concepts to website design. She talks about planning layouts, focus on the user’s reason for coming to the site, solving problems first and making it pretty second.

Test for Usability to Improve Your Design

When you develop an app, some features are easier to use than others. You don’t always get it right with your design. Testing helps you to identify the flaws in your design. Joshua Gross explains How Usability Testing Drastically Improved My Client’s App.

When you create an app or a website, you are solving a problem. You want to be able to impress your visitors to use your app or stay on your website longer. Use app techniques like focusing on activities, instead of a group of users. People come to websites because it answers a question, invites them to play a game or chat with their friends. Test your app. Testing helps you to see how the app or website works when your visitor uses it. By testing, you may see ways to improve the experience for your visitors.

Design requires that you make choices. Those choices affect how a website looks and works. Use these techniques to help you make better design decisions. Do you have any additional suggestions for improving your web design?

Related Article

Fixing CSS Issue with Social Media Buttons

By

On December 31, 2013

In CSS, Web Development

While building the Smells Like Bakin’ website, I followed an example. The example uses CSS to create the hover effect for two social media buttons. When you hover over either Twitter or Facebook, a box appears behind both icons.

Get Bakin Original

Code

The HTML Code looks like this:

<div class="grid_5 omega" id="butt">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-Cake</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a>
</p>
</div>
<p>
We announce all of our new flavors first through Facebook & Twitter, and even take requests!
</p>
<a href="http://www.facebook.com/SmellsLikeBakin">
<img src="img/facebook.gif" alt="facebook"></a>
<a href="http://www.twitter.com/#!/smellsliekbakin">
<img src="img/twitter.gif" alt="twitter"></a>
</div>

The CSS looks like:

#butt:hover img {
background-color: #4CC4A7;
}

To Fix

For this project, I wanted the hover to show only for the specific icon that you are hovering the mouse over. The first step was to change the #butt from an id selector to a class. Second, I applied the class to each link. Third, I removed the id from the div. The result is a box appear behind each icon when you hover over them.

Both icons are circles, not boxes. I didn’t like a box appearing behind the icons. I wanted to change the hover to show a circle instead of a box. I changed to code to create a rounded background by using CSS Circles.

The new code looks like this:

<div class="grid_5 omega">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-Cake</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a>
</p>
</div>
<p>
We announce all of our new flavors first through Facebook & Twitter, and even take requests!
</p>
<a href="http://www.facebook.com/SmellsLikeBakin" class="butt">
<img src="img/facebook.gif" alt="facebook"></a>
<a href="http://www.twitter.com/#!/smellsliekbakin" class="butt">
<img src="img/twitter.gif" alt="twitter"></a>
</div>

CSS

.butt:hover img {
background-color: #4CC4A7;
border-radius: 50%;
width: 46px;
height: 46px;}

Now, the result is a circle appears behind each icon when you hover over them.

Get Bakin Button Fix

Related Article

Bakin with a CMS

What you can do to manage Legacy code

By

On November 22, 2013

In Programming

At the Milwaukee PHP Meetup, Arlen Walker talked about how to deal with legacy code. When you write code, you have to manage legacy code. Legacy code can be defined as code that “you don’t understand the code and you have to maintain it”. For more definitions, check out StackExchange discussion on when is code code.

What are your choices?

You could rewrite the code from scratch. Rewriting the code takes time. Time that you may not have. Or you could make the worst part a little bit better. Look at the code and determine what is the worst part about it and improve that piece.

Use code smells to determine where the trouble spots are. You may find problems like long argument lists, long methods, large classes and complex code.

Remember: If you don’t have tests, you have legacy code.

For more details, read Arlen’s slides to learn about managing legacy code:

Bakin’ with a CMS

By

On October 25, 2013

In CSS, Miscellaneous, Programming, Web Development

How do you learn a new content management system? You build a website with it. A sample website works best because you can delete it if you don’t like the results or even the CMS. I used the Smells Like Bakin’ tutorial from Treehouse and a CMS called Umbraco. Treehouse uses Smells Like Bakin’ to teach how to build a simple website. Umbraco is an open source ASP.Net CMS.

Smells Like Bakin in Umbraco CMS

Building the website

  1. Download and install Umbraco.
    I followed the manual install instructions. Umbraco lets you use an installer. I choose to do it manually, so I could learn what the install process is. The manual process was quick and easy to follow.
  2. Download and install the files for Smells Like Bakin.
    Instead of following the tutorial, I found a copy of the site on github.
  3. Install a starter kit in Umbraco.
    Umbraco lets you install it without a starter kit. Without a starter kit, you need to create your own document types and templates. To save time, it is easier to install a starter kit. Umbraco has several to choose from. I chose the HTML5 Boilerplate. It creates a simple website based on HTML5 Boilerplate.
  4. Modify the templates.
    HTML5 Boilerplate starter kit comes with 3 templates: a master page, a home page and a generic page. Using the Smells Like Bakin’ github download, I started to modified the templates. Umbraco uses master pages. The master page template is used by the home page and generic page template. I added the header, navigation and footer to the master page.
  5. Modify the CSS.
    You can add and modify CSS inside Umbraco. It let you create additional styles that can be used in the CMS editor. These styles makes it easy for a content editor to use them without any knowledge of CSS. For this test, I added the existing styles from my example and then made a few adjustments to it.
  6. Create the Home Page.
    I used the home page template to create the Home page. Then, I added the content and images to the page.
  7. Create an additional page.
    My example of the Smells Like Bakin’ had only one web page. I created an additional page to test the generic page template in Umbraco.

Lessons Learned

  • When installing Umbraco, select and install a starter kit. A starter kit makes your life easier. The type of starter kit depends on what you want to do with the site. Before installing Umbraco, identify the starter kit that fits your needs.
  • Using a Grid 12 system, it made building the website quicker than developing your own. The HTML gitHub example used a Grid 12 system.
  • Umbraco lets you store images inside the database or externally in a file folder as part of the website. Before you build the site, you want to determine which images are added to the database.

With Umbraco, you have to have an idea of what you want to do with it before you start. Umbraco offers the flexibility of page templates, packages(plugins) and XSLT macros. It provides greater control over design and code/markup. As a CMS, it isn’t the type where you can install and be up and running in 5 minutes. If you want that, you are going to need a different CMS.

Related Article

If you need a different CMS, check out CMS Showdown at Web414 Meetup.

Page 31 of 50

Previous

Next

Powered by WordPress & Theme by Anders Norén