Wordpress Leaks

There was a time when web browsers were simple tools used to browse the internet, and the internet itself was just a conglomerate of email and the odd news and gossip websites. However, now the net is much more than that, and with the advent of HTML5, we have seen a new generation of web apps that are capable of performing a multitude of tasks.

Most programmers and coders used to rely on offline programming tools to code and create new stuff. Few years back, we saw the advent of web based Integrated Development Environments and code editors, and nowadays, those online tools are slowly catching up with their offline counterparts.

In this short article, we shall be discussing web based IDEs as a possible and viable alternative to offline IDEs.

Coding, Offline to Online: The Transition

Some years ago, the common trend was to code websites offline and once done, deploy them online. There were many obvious reasons for this model, the most common one being the that the internet speeds back then were super slow. Over time, various online IDEs such as Cloud9 and ShiftEdit came into being, and this led to an experimental shift from offline to online IDEs.

With online IDEs, the choices are aplenty, and each choice seems to have its own mode of operation. There are some IDEs that require you to pay, whereas others are totally free. Similarly, some IDEs support as many as over 50 programming languages and also offer key features like FTP support to help you deploy your work on your own server, whereas others remain absent from FTP and stick to a limited range of coding languages.

Of course, features such as collaborative editing, syntax highlighting, debugging, terminal windows and even integration with services such as Github and DropBox seem to be common in virtually all online IDEs.

Online IDEs: The advantages…

Lets take a look at the positive aspects of online coding tools? Here they are:

1. Mobility:
   Just like a web based office suite such as Google Docs, online IDEs offers the opportunity to work from anywhere. No matter where you are — home, office or out on travel — if you have a decent internet connection and a modern web browser, you can satiate your coding needs easily.
2. Easier Collaboration:
   One of the biggest advantages of online IDEs is the fact that such tools can help you collaborate better on team projects. You can seamlessly share your code as well as develop applications as a team using online tools.
3. No System Constraints:
   You do not need a megaton of RAM or super power processor speeds in order to work on online IDEs.
4. No Operating System Issues:
   Mac, Windows or Linux; no matter which OS you are on, at the end of the day, it is your web browser that matters the most when using an online service.
5. Open Source:
   Web IDEs such as ICEcoder are open source, thereby allowing you to grab a copy of their source code, if you so desire. This means that if you need a particular feature added to the software, but do not wish to wait another two years for the developers to come up with it, you can just contribute yourself.
6. Speed:
   Generally, online coding means you can discover issues and rectify them faster, as compared to offline development and later online deployment. Meaning, web IDEs can help you code and deploy your apps and websites faster.

…and, the disadvantages

Having gone through the advantages of online IDEs, lets now turn our attention towards the drawbacks or some of the negative aspects:

1. In general, the common perception is that online IDEs and code editors are not as robust as their offline counterparts. For instance, if you are used to the likes of PHPstorm, and then move to an online IDE, you might find yourself handcuffed by the lack of features.
3. While this is debatable, most developers feel that online IDEs are ideal only for HTML/CSS and small to medium sized projects. Any bigger project involving a great deal of complex code may choke the life out of an online IDE.
4. Similarly, if your project is too large, using an online IDE would result in a lot of data transfer and processing, and an offline alternative will clearly be more feasible for this purpose.
5. Another often-discussed, though generally unproven, belief regarding online IDEs is the fact that they may not be as secure as their offline brethren. This same logic is also used to criticize cloud computing as well — if your data is accessible from anywhere, it really is accessible from ANYWHERE. While makers of web IDEs do take security very seriously, it does not take much effort to get unlucky and if the web IDE is compromised, your project might be at risk too.

Conclusion

While desktop based coding tools and IDEs are still in vogue, and will, most likely, continue to be prevalent for the next few years to come, online IDEs are gaining momentum at a rapid pace. To compare, take a look at the office tools section, for example: Zoho Office and Google Docs are gaining in popularity, even though Microsoft Office still has more features (at least in terms of quantity, don’t you think?).

Features such as the ability to code and deploy from anywhere and work collaboratively with an entire team have further added to the popularity of online coding tools. Oh, and before ending this discussion, just in case you are wondering, we do have a rather extensive list of wonderful online IDEsfor you to choose from!

What are your thoughts on online coding tools and IDEs? Do you use, or intend to use, any of the online coding tools?

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/dh654SxKfeU/

User Experience Design became a huge trend in the Interactive Industry. Working as a UX designer, UX manager and finally creating UXPin – The UX Design Online App – I soaked up the design field. Even so, this UX revolution came to me as a surprise.

Time for UX Design

“Design and marketing aren’t just as important as engineering: they are way more important” says Dave McClure, founder of 500 Startups – one of the most important startup accelerators in the world. In recent years his words have been proven by well designed, successful products, co-founded by designers e.g. YouTube, Airbnb, Flipboard, Square, Pinterest, Etsy, Path, AboutMe and Slideshare.

User experience design just stopped to be a niche and became a standard. It’s easier now to find an internet company without the SEO guy (after Panda… I wonder why) than without a UX designer on board. According to LinkedIn there are more than 900,000 people somehow connected to UX design and almost 17,000 open job positions as of October, 2012.

Full Infographic available here: The Age of User Experience Design

Seems like everyone wants to have at least one UX Designer in their team and luckily a lot of people want to become UX Designers.

And you know what? I’m not surprised that people want to be UX Designers. It’s a lot of fun! We make life a little bit easier for millions of people. Isn’t that satisfying?

UX is meaningful, no questions here, but I’m afraid it’s not only joy, relax, cute animals and rainbows. There’s a dark side of UX – every day work focused on constant optimization.

The Dark Side of UX

Let me tell you couple of words about my pre-startup, full time UX Manager job: My user experience design team was constantly occupied with lots of tiny tasks focused on the optimization of the User Interface. Believe me it was not something you could brag about during a family dinner (hardly noticeable things aren’t particularly admired). We were performance-obsessed. We measured thoroughly what and how our users do and we tried to make every small fragment of the UI optimized.

It required a lot of scientific-like approach – very methodological and precise. And yes! There’s more math and analytical thinking than visually appealing stuff. That’s the reality. The Dark Side. That’s the real User Experience Design.

User Experience Design lies at the crossroads of art and science. It’s a magical mixture of visual art, hard-boiled psychology and numbers. Non of these nobel ingredients can be omitted, as it may put your whole design endeavor at risk.

UX Design is a Magical Mixture. Photo by Everyone’s Idle

I’m afraid UX is a much harder work than it looks on the outside and you must be ready for that, no matter if you want to become UX Designer, you run your own company and care for UX, you work with UX Designers, or you’re just generally interested in the field.

Dozens of tests checking the influence of every tiny fragment of the design – this is the road you will take if you want to sky-rocket your conversion and reach the ultimate goal: design of well-performing product.

There are no shortcuts. I spent four years constantly fighting for the conversion rate of one web service and right now we’re spending every living moment at optimizing UXPin for our UX users. It might not sound like fun, but it works so well.

Step into the Dark Side of UX and create products that really work.

Conversion Rate?

Oh yes, some of you may wonder what a conversion is and what a conversion rate is. Though these terms have made an amazing career in recent years, I that it’s really easy to grasp their meanings. Let see…

Conversion – is an act in which users change a casual visit to a website/mobile app, etc. into the achievement of a desired action (business goal).

Filling in a form might be considered a conversion, so could buying a product, sharing a message with friends, etc. It depends on our business goals.

Conversion Rate – is the ratio of users who change their casual visit into a desired action (business goal).

Therefore, optimizing conversion means taking certain actions with a plan to increase the conversion rate. Users are part of the conversion rate equation so you really need to get to know them. How can you do that? Test, test, test, test – by testing your designs you’re gathering knowledge which will help you make the right design decisions.

In reality you’ll be forced to get to know the tiniest emanations of your users’ behavior. Only hundreds of tests, psychological tricks and hard work on the interface architecture ma lead you to double digit growths in the conversion rate. I’ve been there and I’ve tried to make it easier, only to learn that there’s no “easier”.

All my experience taught me that conversion optimization is not a weekend-long job – it’s a way of developing your service.

That’s the tiresome reality. The true Dark Side.

Photo by CJ Isherwood

Summing Up The Dark Side

So in my salvational monologue about the Dark Side, I’ve tried to express that you need to test, test, test and… test, even if it doesn’t sound very sexy.

Most probably it’s in your power to double your current conversion rate, but, as Spiderman once said, with great power comes great responsibility. Your responsibility is to test your design conceptions and choose the best one.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/J_HQtSyMZGY/

There are dozens of premium shops and marketplaces to be found all around the Internet. Usually these are popular vendors which sell various types of digital products – e-books, website templates, tutorial videos, icons, graphics, the list goes on for a while. But the idea behind these eCommerce stores is earning money by selling digital goods as opposed to physical items.

I would like to use this guide as a reflection into how you can build high-quality digital products. Even if you aren’t launching your own store online it’s still a good idea to consider the quality of the items you’re building. So many custom freebies are online these days between thousands of digital artists across the globe. But talented web professionals can always tell the difference between quality and shoddy workmanship.

Study the Masters

Probably the first step you should take is examining other talented work by very talented artists. 365psd always has fantastic resources which relate to icons, vectors, and web graphics. But additionally you can locate freebies related to other ideas such as desktop software and open source code snippets.

Github is full of developers releasing their code for other developers to branch off. If you need a specific solution for PHP or Rails then try checking the open repos first. Of course there are many other free websites which host a similar open source mentality.

Building custom WordPress themes has become an extremely popular topic since the CMS has skyrocketed into popularity. Almost all the major blogs and news sources online today are powered by a WordPress backend. Not to mention there are so many people each day launching their own website for the very first time. Theming is one of the first issues you’ll consider when launching any new project.

Following Standards

For most file formats there are usually some conventions you should be following to release a premium new product. E-books for example are typically released in PDF documents with some type of cover illustration page. You can accomplish this using Adobe InDesign or any other similar software.

But when you move into designing Photoshop graphics or coding templates the general standards become more clear. Most Photoshop gurus will layer their PSD files into groups, also splitting up effects onto a clipping mask. Label names are crucial so that you don’t have hundreds of New Layers confusing people who download your files online.

Websites are a bit more fluid since you can work on many different standards. Just follow the typical documentation for whatever language you’re coding and you’ll pick up on other small mistakes along the way. Templating engines like Smarty have great documentation which is easy to skim for important info.

There are even more products we could look into where each file type has their own associated idiosyncrasies. As an example any fonts you create should follow some of the more recent file types associated for the web(eot, ttf, woff, svg). Custom recordings or musical pieces are also easy to distribute since .mp3 files can be accessed anywhere. But leaving blank ID3 tags is a surefire way to send a red flag about your product’s quality.

Leave Traces and Copies

Depending on the resources you’re offering this may not apply to everyone. But as you are creating website templates and graphics you should keep all the original file formats to include with the final release.

For example, you may offer a custom icon set with hundreds of individual 32×32 pixel PNG files. But if you created the icons in Photoshop you may also consider including one large PSD with all the icons put together. Adding a nice textured background can help with marketing to draw attention as a featured caption/image preview.

The same goes for website templates where you may start out coding in strict HTML5/CSS3 and then switch to a backend system. If you’ve got just the HTML demo code it’s worthwhile to offer this along with any custom template systems(WP, Joomla!, Smarty, etc). Just separate these into two folders placed together inside the same .zip archive.

People who download these templates won’t need to install them before checking out how they look in a browser window. Also you are providing a step-by-step track of each phase during the development cycle. This is more handy for other web developers than general users, but almost everybody will appreciate the additional files.

Build on Open Source

The open movement has definitely changed my perception of web development, and the same is true for hundreds of others in the same field. When you can build a website with jQuery sliders and form validation the contents are much more valuable. So why should you reinvent the wheel and code all that functionality from scratch?

Be smart and build your code on top of already existing projects. If the authors require credit then certainly offer some links in your comments or an external a .txt file. But there’s no reason to shy away from open source for reasons of building your own better solution. In fact I would argue many web developers would enjoy grabbing a WP template which already utilizes jQuery.

It makes your work that much easier since all the plugins and external scripts will work together all the same. If you’re building a WordPress theme it’s possible you can include additional features inside the functions.php file. Working with the open source movement will eventually lead to flawless code at a much quicker pace than working alone.

Push Beyond the Limits

The digital products of even 5 years ago cannot compare with many of the products being sold today. You really have to understand how trends are changing in your choice of media and follow along with the crowd. Ultimately your products must improve over time if you are giving careful attention to details.

Find out what similar artists are creating and place yourself just one more notch higher. Go that extra mile to add some pizzazz to your products which nobody else is offering. Good PR is often generated by the users online who find your products and fall in love with them. These customers are more than happy to share links with their friends and followers helping to promote your quality goods.

But realize that you can’t stay at the top forever. You’ll have to keep learning and keep pushing beyond new limits. Over time it may be worthwhile to partner with another creative artist, or form a small team behind your ideas. Long-term dedication is what sets apart the high quality earners from the typical online marketplaces.

Final Thoughts

These ideas will require some time to reflect on your own skills before you can advance with brand new products. The Internet is a big place and there are lots of different skillsets you can build upon. Designers, developers, marketers, and writers can all strive for that top pedestal in quality and performance enhancements.

I hope these tips can get you thinking in the best direction for creating digital goods. Selling packages online or even giving away your resources will always bring about scrutiny. Don’t let a few naysayers get in the way of your passion. Continue pushing forward with new trends and keep yourself interested along the way. If you have any similar ideas or comments feel free to share with us in the post discussion area below.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/wFcGOay6fPc/

Coding a website takes a lot more time than just a simple design. You have to consider how each HTML element will be placed in the document and how you need to style them using CSS. Not to mention there are at least 4 browsers you should test plus the possibility for mobile users.

There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend. There are many ways you can save time writing HTML5/CSS3 and even working with jQuery. But truly the best remedy to understand frontend development is lots of practice and patience.

Work with Document Templates

Most developers do not start with a plain blank document. It’s not difficult to store a local copy of your typical setup when coding a website from scratch. There are even lots of HTML5 templates you could work with instead of crafting your own.

I personally choose to setup a custom dev environment because I can have more control over where the files are located. This also means I can work with other CSS and JS files to get me started. The only significant inclusions may be jQuery and some CSS resets.

But try to keep the HTML template as slim as possible. You don’t need any elements inside the body since you’ll likely code each website layout differently. Focus mostly on the meta content and other tags found inside your document header.

Break Up your Stylesheets

When first coding your styles it’s common to work within a single file. This makes everything much easier to manage, up until a certain point.

When you begin to include media queries and IE-specific code it’s worthwhile to build out a few different files. I usually split into ie.css, responsive.css, and forms.css. If needed you may break up entire pages into their own file – such as profile.css or user.css.

It doesn’t seem like much of a priority to begin with. But remember that after you launch your website live it will still require maintenance. Going back to edit a single stylesheet will require lots of find & replace functionality. Organization is the key to any frontend developer’s lifestyle.

Writing CSS3 Properties

Back before CSS3 standards were released the major specification was CSS2. Many of these properties could be written together in block-line formatting. Even if you chose to break up styles onto a single line there was still plenty of space to quickly scan through.

Unfortunately we have seen many new CSS properties released which take up a lot of extra white space. The CSS3 gradients and transition properties immediately come to mind. These can save you tons of development time without the need of resorting to JavaScript. But your CSS files may quickly become a huge mess of properties and selectors.

I’ve found a comfortable medium in writing CSS syntax where I use both types of inline and block-level selectors. On minimal elements with only a few properties it’s easier to keep them inline since you’re saving space. But using these more complex CSS3 properties almost requires block-level syntax as the code appears jumbled together.

This may also occur using smaller CSS3 styles such as border-radius. You’ll need to support the -moz and -webkit prefixes, so you’re really writing 3 properties targeting different browsers. It’s not such a huge problem since the border radius properties are much easier to use than background images. But to keep your code clean and readable I recommend breaking up lines and keeping those selectors segmented.

Powerful JavaScript Libraries

There’s no doubt that jQuery and MooTools are the most well-known libraries to date. Their open source nature has allowed for quick adoption into other CMS’ such as WordPress and Pligg. But consider some of the other amazing JavaScript solutions in the market.

For Ajax requests you should check out Prototype.js. It was originally released in 2007 and has since built up a reputable name. Web applications can be quickly scaled and require very little JavaScript coding on your end.

Another newcomer into the field is Retina.js for dynamic mobile graphics. This is a perfect example of “drop it and leave it” where you can include the script into your website with no customizations required. If you create images based on Apple’s @2x retina display this script will detect retina devices and replace your image URLs automatically.

Scroll through this Smashing Magazine article which outlines a whole slew of JavaScript libraries. There are 40 different frameworks listed which focus on a few different subjects including web forms, data validation, and working with databases. It’s almost unbelievable how powerful JavaScript has become!

jQuery Animations

Aside from Ajax calls JavaScript is also exclusively tied to web animations. The CSS3 docs allow for a bit of leeway, but this is only within standards compliant browsers. jQuery animations are quick to load and will resolve even in modern versions of Internet Explorer.

Any typical website may find value in simple jQuery animations. They are easy to create and work by manipulating different CSS properties over a given time. Many animations will even work in Mobile Safari and Android-based web browsers.

Simple examples may include fading the opacity or hiding a content element. You can also replace HTML inside a container by sliding it over left or right. There are so many great techniques with animate() I must recommend looking into the docs. Test out an application idea and see if you can spruce up any typical layout styles.

Conclusion

There are so many more topics to discuss when dealing with frontend web development. Coding in HTML/CSS is difficult enough to wrap your head around. But moving into JavaScript may require a few weeks of dedicated study and commitment. However, with these 3 languages under your belt it’s possible to turn practically any website idea into a reality.

Never take the frontend for granted in your design work. The process has become more streamlined over the past decade but it is still not so simple for beginners. Web developers in the field 4-5 years have grasped all the difficult concepts and forget the process of learning. Be sure to share your ideas on coding frontend web layouts within the post discussion area below.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/45trRDZtdQk/