The Great (Adobe Muse Beta) Debate

Posted on Nov 17, 2011 by Rick to Web Design, Web Development

Since Adobe recently announced the Beta release of Muse, there’s been a little turmoil at THAT Agency. Basically, our designers and developers have a running debate as to the value of this new Web publishing tool. As you’ll see, the two sides definitely aren’t seeing eye-to-eye on the issue.

(If you’re not familiar with Muse, here’s a quick video made by Adobe’s design team which will bring you up-to-speed on Adobe’s vision)

Debate methodology: To facilitate this debate, I (the moderator) sent the same questionnaire to both our design team and our development team. Here are the results:

Q: Adobe’s Muse team surmised that, 5-10 years from now, they don’t think that anyone will be coding in order to design websites. Are they visionaries or lunatics?

Designers say: There will always be a need for developers in web development. However, this is a tremendous advancement for designers and I see developers moving away from smaller projects all together.

Developers say: “Web Pages” may not even exist in 10 years. In fact, you can already see the move toward dedicated applications in the mobile space. Someone always has to code the next new thing. Print designers are already outdated, but what happens when they are expected to design for applications instead? Good luck finding a job with that print portfolio.

The Mediator says: Err, developers are angry people! I like anything that makes it easier to get creative on the Web. I understand the need for developers, but also appreciate anything that makes it easier to share creativity on the Internet.

Q: Adobe says that future versions of Muse will have CMS integration capabilities. Would your answer to #1 change if that were the case? If so, how?

Designers say: No. The tools for the web and designers are constantly improving. Muse CMS will be an expected, but greatly appreciated leap forward for everyone.

Developers say: No, again, technologies that are “WYSIWYG” in nature never provide the flexibility that a professional solution requires. Drag-and-drop can only take you so far. Remember geocities?

The Mediator says: The developers have a point. While we’d like the product more if there were database capabilities, we’re just not sure that this is going to get done in time for it to really matter.

Q: The Muse product was created to begin to bridge the technological gap that previously prevented print designers from designing for the Web. In other words, Adobe created Muse to take away technical barriers which previously stifled creativity. Do you think this is true? If so, what impact do you think this new ‘talent’ will have on the Web and our industry? Will this introduction of new creative talent to the Web help improve the quality of website designs and content out there?

Designers say: Maybe, But I think designers who are interested have always found a way of getting their vision online. Muse just gives us designers an easier way in which to do it.

Developers say: In my experience, giving someone with no experience in Web design a tool with which to design is like giving a three-year-old a conductor’s baton and asking them to lead a symphony. They won’t know any better than they did without it. This “revolution” in design doesn’t create an innovative product. If you are reliant on Muse, you can never progress beyond the limitations inherent in the product.

The Mediator says: Geez, looks like designers and developers agree on this one. I actually disagree with both. I come across a number of ‘print designers’ who would probably make great Web designers given the right tools. Technology can be intimidating so I really hope this helps more designers get online. I agree with the developers that the applications will be limited, but at least the designs themselves won’t have to be!

Q: Is Muse a game-changer or just something to keep our eye on?

Designers say: It is definitely something to keep your eye on. I am very optimistic and impressed with what I have experienced already with the beta version.

Developers say: The future isn’t in creating a great web design. The future is in content and data. More and more, we are looking at content through “apps” or other developed programs. Muse? I’ll keep an eye on it; I’ll watch it burn to the ground.

The Mediator says: I’m on both sides for this one. I’m looking forward to removing creative barriers but also think that content is still King, and Adobe Muse isn’t the Ace that we’ve been looking for.

Comments? Leave your take in the comments below. It wouldn’t hurt to tell us what side of the fence (design or coder) you’re on, either.

Tags: adobe muse

WordPress Security Warning

Posted on Sep 14, 2011 by Taylor to General, Web Development

Despite increased security in versions 3.1.4 and 3.2, there are still risks in running WordPress – as there are to running any CMS, particularly those that are open-source. WordPress recently warned users to watch out for three malicious plug-ins that were available from the WordPress site for more than 24 hours.

WordPress users often depend on plug-ins to extend the functionality of the platform, and, in fact, there are scores of great choices that allow you to do everything from optimize for mobile to analyze search behaviors. It is impossible to harness the potential of WordPress without trying plug-ins, but caution is essential. WordPress recently required all of its users to change their passwords after three popular plug-ins, AddThis, WPtouch, and W3 Total Cache, were discovered to contain “cleverly disguised backdoors.” Hackers could then access accounts, according to WordPress developer Matt Mullenweg.

“We determined the [suspicious] com,mitts were not from the authors, rolled them back, pushed updates to the plug-ins, and shut down access to the plug-in repository while we looked for anything else unsavory,” Mullenweg told users in a blog post. Each of the three affected plug-ins was very popular: AddThis and W3 Total Cache were downloaded about 500,000 times each, and WPtouch, which was free, was downloaded more than 2 million times.

There is no evidence that hackers were able to compromise the WordPress site, but Mullenweg and staff were taking all possible precautions. According to HP DVLabs, 80 percent of all WordPress-related vulnerabilities are due to plug-ins. One of the culprits is weak or reused passwords. Mullenweg says, “make sure to never use the same password for two different services.”

Paul Ducklin, head of technology for Sophos-Asia Pacific, says, “If you’re a WordPress user, you’ll know that the WordPress platform includes a complete and powerful administration interface, password-protected, via a URL such as ‘site.example/wp-admin.’ A WordPress backdoor might offer something with similar functionality, but using a different, unexpected, URL, and using a password known to the hacker, instead of to you.” Use caution and always scrutinize plug-ins for suspicious behavior.

Tags: wordpress, Wordpress Hacks

WordPress 3.1: 15 Million Downloads

Posted on Sep 13, 2011 by Joey to Web Development

WordPress recently released version 3.2 of its software; coincidentally the previous version, 3.1m hit the 15 million download mark on the same day WordPress announced the upgrade. 3.2 is poised to achieve similar success; within 24 hours of its release, 333,000 million copies were downloaded. What does WordPress 3.2 have to offer?

In the WordPress News blog announcement for 3.2, Matt Mullenweg writes, “The focus for this release was making WordPress faster and lighter.” Changes include:

• Updated dashboard design. The design and typography is more clean and simple, allowing for an enhanced experience.
• HTML5 Twenty Eleven theme. This replaces the default theme for new blogs. One of the features of the theme is the ability to have rotating header images.
• “Zen mode.” The redesigned post editor allows you to go full screen and write. The idea is for a “distraction-free” writing environment. Most-used shortcuts are available at the top if you scroll your mouse over them, and you will have access to menus, buttons, widgets, and interface elements you need.
• Retiring of PHP4, IE6, and older versions of MySQL to make way for new technologies.
• More shortcuts on the admin bar so you can get to your most-used actions easily.
• Approve and Reply feature to facilitate faster conversation management.
• Enhanced security features. Only versions 3.1.4 and 3.2 are sufficiently patched to close up security risks that were common in other versions.

WordPress 3.2 is available for download via the WordPress.org site. Set-up is easy and fast, particularly if you are upgrading from a previous version.

Tags: wordpress

Joomla: The “Hippie” CMS

Posted on Sep 6, 2011 by Joey to Web Development

Open-source content management systems WordPress, Joomla, and Drupal make up more than 75 percent of the market share, clearly dominating overpaid services like ExpressionEngine. Of these, WordPress makes the biggest splash; not only do 62 percent of the top million websites use the CMS, it has a recognizable face and voice in Matt Mullenweg. Second place Joomla, according to TechCrunch, seems to “fly a bit under the radar.” Why is this? And is Joomla a good choice for your business?

According to data from BuiltWith, Joomla powers about 1.4 million websites. It has recently hit its 23.5 million download mark. As TechCrunch’s Rip Empson points out, Joomla doesn’t have a single figurehead like WordPress does. Instead, it is run by its community of developers, as well as a team that includes OpenSourceMatters.org. This was done purposely to keep Joomla a community-oriented product and to ensure that it was always held accountable by developers and users.

President of OpenSourceMatters, Ryan Ozimek, says that Joomla has taken on a “hippie vibe” because of its image as the “little guy.” While it is relatively unknown in the US, Joomla does have a significant international presence. It is used in more than 200 countries, and what’s more: over 2500 international government agencies power their websites with Joomla. In the US, these include the US Army and Air Force, and NASA.

Joomla is not a money-maker; in fact, its revenue comes entirely from ad services and sponsorship, and it has no heavy-handed investors. This furthers its reputation and image as a hippie CMS, but what does make it a friend to the little guys, so to speak, is its ease of use. This makes Joomla a good fit for smaller companies or those without extensive technical experience because of this, and because it is free. A CMS like Drupal, by contrast, is more intricate and complex and would be a nightmare for the novice.

Joomla doesn’t see itself in competition with other open-source CMSs. Ozimek says that their competition is proprietary software. He adds, “We want to work towards a time when we’re all open coding.”

Tags: Drupal, Joomla, wordpress

Joomla Security Fix

Posted on Sep 5, 2011 by Taylor to Web Development

Joomla is run by a vast network of developers who work on the open-source CMS to offer better functionality, and of course, greater security, for users. One of the biggest drawbacks of opting to go with an open-source CMS is that these are more prone to security vulnerabilities than paid services. In its newly released version 1.6.4, Joomla addresses four security risks that affect versions 1.6.3 and lower.

Joomla 1.6.4, which is available for download, and its corrections include fixes for two cross-site scripting, or XSS, problems, inadequate permission checking that could lead to unauthorized access to sites, and a specific issue with inadequate filtering that led to information disclosure holes. Users are advised to upgrade to this new version to resolve these issues. Also, if you currently have 1.6 and want to upgrade to 1.7 in the future, you’ll need to upgrade to 1.6.4 first.

Joomla powers between 1.4 and 2 million websites and is the United State’ second most popular open-source CMS, behind WordPress. It is used in over 200 countries, and is trusted by governmental agencies, including NASA, the US Army, and the US Air Force. The security issues fixed by version 1.6.4 were all medium- to low-priority.

Version 1.6.4 is available for download via Joomla.org.

Tags: Joomla

Update for WordPress for iPhone and iPad

Posted on Aug 22, 2011 by Joey to Web Development

It is not difficult to see why WordPress is one of the most popular content management systems in the world. Bloggers and businesses turn to the CMS because it is easy to manage, flexible, and adaptive. You can find plugins for virtually any task you need covered, and because it is a free (free is a great reason in itself!), open-source software, there is an incredible amount of support and resources for users. WordPress has issued an iOS update, hoping to become even more indispensible, this time on the go with Apple’s mobile devices.

What has the iOS 2.8 update added for users?

• “Action-centric” quick photo button.
• Statistical metrics breakdown featured with daily, weekly, and monthly charts.
• Translated into 10 languages, including Japanese, Portuguese, French, and Spanish.
• A fix for ¾ of all the crashes in the previous version of the app. Many users had described the previous version as buggy, and 2.8 seals up a lot of security holes.

Jared Newman of Technologizer points out that, even with the improvements, “the latest app update is still missing major features that no blogging tool should be without.” What are these? According to Newman, there is no quick and easy way to create links. There are also no buttons to enhance text, such as strikethroughs, italics, bold, block quotes, lists, and spell check – which is crucial on a mobile device when misspellings and typos are more apt to occur.

Despite this, the update and its new features gives bloggers another layer of convenience on the go.

Tags: iPad, iPhone, wordpress

The Basics Part II: CSS Rounded Corners

Posted on Aug 18, 2011 by Nate to General, Web Development

If you’d like to see part one of the series you can go here: CSS Absolute Positioning.

In part 2, I’d like to go over CSS rounded corners. For ages I’ve spent time poring over websites trying to figure out what method would work best for getting me those coveted round corners in my site. The method we will be discussing today provides you with a box that is not only stretchable horizontally, but vertically as well, thus making this solution totally dynamic.

This method makes use of absolute positioning to create our edges and corners. There are quite a few variations based on what you’re trying to do with your rounded corners, but we’ll just be covering a simple box with a 1px rounded border like so:

The first thing you’re going to need are the images for each of the corners, and a one pixel image that is the same color. You can do this manually, or you can use a site like http://www.generateit.net/rounded-corner/ to generate your corners for you. I generally do the latter since everything is pre-cut and ready to go.

After you have the images, the HTML to create the box is pretty straightforward:

<div class="roundBox">
          <span class="top"> </span>
 
		 <span class="left">   </span>
		 <span class="right">   </span>
		 <span class="top-left">   </span>
		 <span class="top-right">   </span>
		 <span class="bottom-right">   </span>
		 <span class="bottom-left">   </span>
<div class="roundBoxText">
        This is some text inside the rounded box</div>
<!-- End Round Box Text --></div>
<!-- End Round Box -->

To explain the above code, we are basically creating a container “roundBox” to house the borders, and then creating the ‘s for each corner and edge of the box. This can be used as the basic html for a wide variety of rounded corner boxes.

Next, the css gets a little more inolved:

On to the css:

.roundBox {
position: relative;
padding: 4px 0px 4px 6px;
font-size: 14px;
height: 200px;
width: 200px;
text-align: center;
}
.roundBox .roundBoxText {
position: relative;
z-index: 2;
}
.roundBox .top-left, .roundBox .top-right, .roundBox .bottom-right, .roundBox .bottom-left, .roundBox .top, .roundBox .bottom, .roundBox .left, .roundBox .right {
position: absolute;
z-index: 1;
font-size: 0;
line-height: 0;
}
.roundBox .top, .roundBox .bottom {left: 3px;right: 3px; height: 3px;  }
.roundBox .left, .roundBox .right { top: 3px;bottom: 3px;width: 3px;}
.roundBox .top { top: 0; background: url(img/border.jpg) left top repeat-x;}
.roundBox .bottom {bottom: 0; background: url(img/border.jpg) left bottom repeat-x;}
.roundBox .left {left: 0; background: url(img/border.jpg) left top repeat-y;}
.roundBox .right { right: 0; background: url(img/border.jpg) right top repeat-y;}
.roundBox .top-left, .roundBox .top-right, .roundBox .bottom-right, .roundBox .bottom-left { height: 3px; width: 3px;}
.roundBox .top-left {top: 0; left: 0; background: url(img/tpl.png) left top no-repeat;}
.roundBox .top-right {top: 0;right: 0;background: url(img/tpr.png) right top no-repeat;}
.roundBox .bottom-right {bottom: 0; right: 0; background: url(img/btr.png) right bottom no-repeat;}
.roundBox .bottom-left { bottom: 0; left: 0;background: url(img/btl.png) left bottom no-repeat;}

This CSS looks very complicated, but is actually quite simple. In the first part, we are setting the general width and height of the box, and setting a few styling things like font size. The most important part of this is the position: relative. Building upon our previous post where we dealt with absolute positioning, this is necessary in order for the borders to be contained inside the container.

Next we are going to set each of the corners to position: absolute;, and give them a lower z-index than the content div (this isn’t necessary for this example, but you may have large borders that go under text in your own work). We then take each corner and edge and set them to their appropriate positions. For example, top-left would end up with top:0 and left:0;. For the edges, you will notice that the positions are not 0. This is done to keep the repeating edges from overlapping the corners.

And there you have it, a box with rounded corners with compatibility for all major browsers. This solution is great because it doesn’t require javascript, or any CSS hacks to work. It is just plain HTML and CSS. I do apologize to the HTML purists out there who don’t like the extra markup in their code, but it is my opinion that the tradeoff for universal support is well worth it.

See the live demo below, or download the source files:
Demo
Source Code

Tags: CSS, html, Web Development, website design

Joomla Plugins for Security

Posted on Aug 13, 2011 by Joey to Web Development

Joomla is one of the most popular content management sites in the world; more than 14 million copies of its software have been downloaded since 2007, and Joomla estimates that it powers 2.7 percent of the biggest million websites in the world. Security is a concern for any business, no matter what CMS they use. Joomla provides a variety of plugins that can help you keep access to your site safe, and keep your site more secure. Here are some top choices:

Admin Tools. This is one of Joomla’s most popular security tools and is very highly regarded by users. The developers call it a “true Swiss Army knife for your site.” The plugin provides a variety of services, including detecting, notifying, and installing new releases as available, fixing your files’ and directories’ permissions, and protecting your admin directory with passwords, and more. Very easy to use, Admin Tools offers a host of benefits in its free version, and you can upgrade to Admin Tools Professional for a fee to access more features.

XCloner Backup and Restore. XCloner is able to backup sites running on not only Joomla, but also WordPress, Drupal, and other CMSs. You can create full or partial backups, simple or compressed backups, and incremental backups, manage backups, clone backups to other locations, restore simple and compressed archives, restore original files and directories permissions, exclude database from importing, and more.

RSFirewall. This protects your site from hacker attacks. What is best about RSFirewall is that it protects against new threats and vulnerabilities. The security program tracks and blocks intrusion attempts, seals up security leaks and third party vulnerabilities, filters requests, notifies you of alerts, denies administrator take-overs, and more.

These extensions and more are available for download via Jooma’s website.

Tags: Joomla, plugins

Absolute Positioning CSS Elements: The Basics

Posted on Jul 22, 2011 by Nate to Web Design, Web Development

When first learning to write HTML and CSS, creating  a compatible, functional, great-looking website can be a daunting task. Many early developers are stuck with hours upon hours of troubleshooting, trying to figure out that one small piece of CSS that is causing their page to to look like a garbage dump. That’s why, in this series of posts, we’ll be going back to the basics and looking at some simple CSS methods you can use to crate great designs with as little hassle as possible.

The first item we are going to look at is absolute positioning. Let’s assume you have a box like below that you want to place some objects in, but they are not going to be sitting side-by-side like usual. Instead, you want them to be layered on top of each other, and you want them spread out in different corners of the container.

The first rule when placing objects inside of a container is to give the container a style of “position:relative”. If this is not done, then the absolute elements we will place later will ignore this container, and will find the next highest div that is static and all of your positioning will be wrong.

Next, we can place any elements we please inside this container. By setting the elements to “position: absolute;”, we are essentially releasing it from any boundaries that existed. It can now overlap and move freely within (or outside of) the boundaries of the container through the use of top, right, bottom, and left properties.

Being able to move these elements anywhere on the page is great, but what about overlapping? Let’s say I want to add another div in the center of the box that would overlap the other boxes:

Now we have an overlaying box! There’s only one problem, it’s not showing over the other boxes. This is where z-index comes in.

By setting the z-index to ’1′, we are essentially telling the block to show above the other blocks whose default value is still ’0′.  So far we’ve seen that all of these blocks can be positioned inside of the container, but what if we want our blocks to show outside the boundaries of the container? we can give our blocks a negative position, just as easily:

By simply creating a negative position on the element, it will cause the element to move outside the bounds of your container. This can be used in a variety of ways on your website to create very interesting results.

And those are the basics of absolute positioning. Stay tuned for part 2 where we discuss some more basics of CSS.

Tags: basics, CSS, Web Development

Attack of the Plugins

Posted on Jul 18, 2011 by Joey to Web Development

Free, open source software is tremendously beneficial to a wide variety of businesses and websites. Not only is the price right, but because it is open source, there are scores of people working on the programs. You can easily find support, answers to your questions, and, of course, free plugins to create a more user-friendly, convenient, and efficient experience for you and your visitors. But when you use a free content management system, like WordPress, Joomla, or Drupal, there are risks. What do you do when plugins attack?

Hackers like open source software and CMSs as much as businesses do. It is easy for them to gather data and visitor information via a plugin or add-on. When you register to get a plugin, you are giving that developer access to personal information, including login information. Even if the plugin itself isn’t dangerous, that is a lot of data to give out, especially if you use that login in multiple places. If the plugin is, in fact, malicious, you may not realize it, especially if it is well-designed, until your information or that of your readers has been compromised.

But you can’t stop using plugins. They do add usability and customization that may be crucial to your site. It is important, though, to do your homework before you download a plugin. What should you look for?

• A reputable developer. Are they well-known? Are their plugins frequently used?

• Are there any known vulnerabilities or malicious behavior associated with this plugin or developer?

• Make sure you have the latest version of your CMS uploaded.

• Secure your site by adjusting your File Permission Settings.

WordPress, Joomla, Drupal and other open source programs allow your site to compete with the big boys even if you are on a budget. Just remember to exercise caution and be selective about your plugins. Take the few minutes necessary to check up on a specific plugin or developer and always be vigilant about security.

Tags: plugins