Creating buttons with bootstrap classes

August 25th, 2016 by Darren Moore No comments »

As we know, Bootstrap is a front-end framework that helps web developers develop pages with mobile technology (responsive) without having to enter a CSS line. In addition, the Bootstrap has a variety of components (plugins) in JavaScript (jQuery) that help the designer to implement tootlip, menu-dropdown, modal, carousel, slideshow, among others, without difficulty; just adding some settings in the code, without the need to create scripts and more scripts.

So today we’ll talk about how to create and configure buttons using the bootstrap.

The buttons are created using the tag <button> </ button> , but the bootstrap always gives a more harmonious look for the front end. Thus, only by including classes of this library, we transform a common and unstyled button into a button with style. To create a button, you must use the code:

001

To add the bootstrap classes, we need to include the links of the bootstrap library. They are these three:

The bootstrap classes that define the color pattern are: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link.

002

We can also set the size of the buttons by adding one more class to the button using btn-lg, btn-md, btn-sm, btn-xs:

003

In this way, we will have more presentable buttons using bootstrap. To use it within Scriptcase, you can create a field label receiving the button code or replacing the button class using jQuery.

For more information, visit: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp.

 

Scriptcase Buttons

Recently we have separated, related to the themes of applications, the CSS settings of the buttons. Today they are two totally separated things from each other. To help our customers create advanced themes for their buttons, we have created an authoring tool of the themes that can be found in the Layout menu -> “CSS of the buttons.”

004

The tool allows you to upload images, icons and configure the main possible CSS elements of a button.

005
006

With the template created, we must enable it within the desired application in the Layout menu of the application -> Display -> Button.

007

 

That way you have the possibility to create your buttons’ themes within the Scriptcase even without an advanced knowledge on the subject.
Want to know more about the best web development tool on the market? Click here and get to know Scriptcase.

UX Design: data and statistics that prove its importance for companies

July 7th, 2016 by Darren Moore No comments »

Companies are increasingly realizing that investing in the experience of users can bring benefit and excellent financial results. The most diverse digital channels (website, mobile site, application, etc.) are cash machines able to reach more customers, find new markets and facilitate consumer access to their goods and services. But if users have a bad experience when using these products or services, the business as a whole suffers. On the other hand, if users have a positive and enjoyable experience with the brand, they will bring friends and family to share this same experience.

Imagine a user of a shopping site, for example. If he is faced with difficulties or problems to find the desired product or even the steps required for the execution of a purchase, there are high chances that the simply closes the browser tab and goes to the competitor. If he cannot complete the purchase, not even the best promotion will make him buy the product. It is just one click and it will already be in another store.

But it is not only the users who benefit from the investment in UX, companies also improve productivity as well as gain more profit and return on investment.

UX, ROI and productivity

Dr. Susan Weinschenk, head of UX Strategy on Human Factors International (HFI), one of the largest companies in the world specialized in user-centered design, showed in a study that projects that have been designed with focus on user experience generated a significant return on investment (ROI).

To illustrate this importance, she cited some data found in the article Why Software Fails. For example, the estimated amount of time that programmers spend on avoidable rework is up to 50%. In addition, the cost to correct an error after the development is 100 times greater than correcting the same mistake before the project is completed. Thus, a project that contains the basics of UX since the establishment has less possibilities of errors and redesigns, which would only appear after the user contact with the platform.

Investing in User Experience also means cutting time and future costs with unnecessary maintenance, allowing that this saved amount is allocated to other needs and to business expansion. No wonder that UX Designer is one of the most popular positions in recent times according to Linkedin, justifying the running of companies by professionals who understand and master the subject.

Proving the importance of UX

Often we need more tangible evidence of real value in investing in UX within our companies. Here are some statistics gathered by the designer Jozef Toth on companies that saw favorable numerical results after implementing changes in the design of their products.

  • Infinite Scroll may decrease dropout rates in your homepage. The website Time.com reduced the drop by 15% after adopting infinite scroll on the homepage. (Source)
  • In 10 years, an investment of $ 10,000 in a company focused on design would have given a return of 228% higher than a conventional investment in the stock market. (Source)
  • Choosing a particular shade of blue resulted in additional income of $ 80 million dollars to Bing. (Source)
  • For every $ 1 invested in email marketing, the average return is $ 44.25. (Source)
  • 88% of online consumers claim that they are less likely to return to a site after a negative user experience. (Source)
  • Sites that are slow to load cost to companies $ 2.6 billion a year. (Source)
  • Users’ judgements about the credibility of a site is 75% based on their aesthetic quality. (Source)
  • 85% of adults believe that the mobile site of a company needs to be as good (or better) than the desktop site of the same company. (Source)
  • You are 64 times more likely to climb Mount Everest than clicking on a banner. (Source)

UX is investment with guaranteed return within any company – they have already realized that and are chasing it. Promoting a successful experience, clear, simple and easy for users increases considerably the chances of re-purchase of your product or service and also provides information to others.

This post was taken from our friends from Scriptcase.

Original post: UX Design: data and statistics that prove its importance for companies

Importing database image and using bootstrap classes

June 14th, 2016 by Darren Moore No comments »

As many people already know, Bootstrap is a free front-end and open source library for creating websites and web applications. Among all codes stored in this library, there are classes for imaging such as: img-rounded, img-circle, and img-thumbnail and img-responsive. We will now address each of them:

  1. img-rounded: This class makes the images with slightly rounded corners.
  2. img-circle: This class makes the images in the circle format.
  3. img-thumbnail: This class makes the images in thumbnail format, and with a slightly rounded edge.
  4. img-responsive: This class makes the images in responsive mode.

Now we will see how to use these classes in the tag <img> </ img> and within scriptcase.

As an example, I created a control application with a label field and we will make the call from an image database.

1 – You need to add the bootstrap library, for that we can only use the site itself or import links as external library within the onload event.

2 – We will create a PHP method called “search_img” to bring the database image by removing from the encoded code any prefix or suffix that has been added to be saved in the bank. So let’s put this code:

3 – Now let’s turn the onload event, and add the code that will cause the image to appear in the field:

Note that in the above code, I created a variable receiving the value of the PHP method, and then I made the field label receiving the img tag with the class ‘img-circle’, and the src which is where we put the path of the image receiving the variable along with php code that defines the variable as image.

image-shapes

Now do the test yourself and see how it looks! :)

To learn more, visit: http://www.w3schools.com/bootstrap/bootstrap_images.asp.

This post was taken from our friends from Scriptcase.

Original post: Importing database image and using bootstrap classes

How A/B testing can improve the quality of your website design and generate more conversions

June 8th, 2016 by Darren Moore No comments »

A/B tests allow you to compare two versions of the same product and monitor the effectiveness of small changes in design. If you own a website, an app, or any other digital product, this method can help you test the changes that convert more and find out how can they improve the user experience through the analysis of conversion statistics and usability of the different versions. If the new version works best, you define it as winner and it starts to be displayed for 100% of the audience.

Big companies like Facebook, Google and Microsoft often perform A / B testing to improve their products. You probably should have already participated in one of these tests while surfing the internet and did not even notice.

An A/B test conducted by Facebook in 2014 indicated that when users opened the social network application for iOS and were surprised with a personalized loading animation on Facebook (left), this meant that they blamed the application by the delay in loading . In a B version of the app, presented to only a few users, an iOS native circular spinner (right) was displayed instead of Facebook’s default. Experience has shown that with this, users were less likely to blame the Facebook app and put the blame of the slowness on the OS.

http---mercury.io-wp-content-uploads-2014-02-facebook_loading_animation

 

What to test?

Your choice of what to test will obviously depend on your goals. If you want to increase the number of entries in a form on your website for example, you can test the length of the registration form, field types, privacy policy view, etc. The purpose of the test in this case is to find out what stops visitors to sign up. Is the form very large and intimidating? Are Visitors concerned about privacy?

Or maybe the site is trying to convince other visitors to register? All these questions can be answered, one by one, testing the elements properly.

Some examples of what can be tested on a website:

  • Headline of the page
  • Call-to-action (buttons for conversion)
  • Images or videos
  • Product Overview
  • Size and form fields
  • Reliability indicators (testimonials, certificates, etc.)
  • Advanced Testing may include pricing structures, sales promotions, navigation, menus and much more.

Using Google Analytics to perform the tests

Since 2012, A/B testing can be done via Google Analytics. There is a tab within the tool to help you in the test creation process.

Google Analytics measures the effectiveness of each version of the page, and, with an advanced engine statistics, determines the most effective version.

https---vwo.com-images-page_ab_testing-02.png.pagespeed.ce.BmWcShEZAM

The tool also provides a different model of tests, allowing to analyze two or more versions of the same page (multivariate tests A/B/N). They may be small changes, or you can test completely modified pages for specific groups of users from different URLs. See what you can do:

  • Compare two or more web pages or application screens
  • Define what percentage of your users will be included in the test
  • Choose what purpose to test
  • Receive updates by email about your experience running

A/B tests and multivariate tests are excellent resources because they offer real feedback from the market, measured accurately. It is not a simple research in which someone can answer one thing and do another one; but they are consolidated facts. The different versions are distributed randomly in the same duration without risk of external factors influencing the conversion rate, making it a much more reliable result.

Do experiments like this in your company’s products. The results are very satisfactory for you and especially for users who, consequently, will receive an improved version of the product and obtain a better experience.

Read more

This post was taken from our friends from Scriptcase.

Original post: How A/B testing can improve the quality of your website design and generate more conversions

Web Apps vs Websites: Understand the difference

June 2nd, 2016 by Darren Moore No comments »

<em>— Oh, so you are programmer. What do you do?</em>

<em>— I work making web applications.</em>

<em>— So you work with web? Can you make a website for my food truck?</em>

How would you explain the difference between <strong>web apps</strong> and <strong>websites</strong>? Situations like this are normal in the lives of developers working on web.

The advancement of technologies for internet and browsers ended up enabling the creation of increasingly complex and elaborate sites. That’s how the <strong>web apps</strong> term appeared (or web applications).

Distinguishing the two terms is, in fact, something relevant. Taking into account that both involve different situations, costs and objectives, it is important that developers are familiar with the concepts of each one.

The <a href=”https://css-tricks.com/” target=”_blank”>css-tricks</a> blog conducted a survey of <strong>17,161</strong> developers, asking the question: Is it useful to distinguish between “<strong>web apps</strong>” and “<strong>web sites</strong>“?

The vast majority think it is a valuable distinction to make. We will see in this post:

• The basic differences between web apps and websites

• The cost ratio for development of both

• In practice: How the concepts end up colliding
<h2># The basic differences between web apps and websites</h2>
<img src=”http://blogbackend.scriptcase.net/wp-content/uploads/2016/06/website-development-vs-web-application-development.jpg” alt=”Source: http://colorwhistle.com/” width=”850″ height=”450″ />

Source: http://colorwhistle.com/

The debate on the topic is broad and usually arises several arguments. See a list with some of them:

“It is a matter of scope. 5 static pages. Web site. Dynamic data and input from users. Web app.”
“The distinction comes from a vision between back and front end. More front-end, website. More back-end, web app.”
“It is a matter of use. Does it performs tasks? Web app. Does it only delivery information? Website.”

Definitions abound …

But let’s get to what really matters.
<h3>Websites</h3>
Websites are static, ie they are not updated very often. Its goal is to provide information to the user, so there is no interaction in changing the content by him/her. A classic example is the company websites, where certainly you will see: description of products / services offered, company history and forms of contact (email, phone, etc).

They are built using <strong>HTML</strong>, <strong>CSS</strong>, and maybe a little <strong>JavaScript</strong>. No <strong>programming language</strong> is required, much less a<strong>database</strong>.

Websites are a huge part of the web and play important roles as letting you know of an event or new product to be released or showing you the services of a particular company.
<h3>Web Apps</h3>
Web apps function as <strong>desktop applications</strong> (Word, Photoshop, Skype), and they are dynamic and are constantly changing. They depend on user interaction to achieve their objective, either contributing with content (YouTube, Facebook, Twitter) or collecting data from other sources and presenting them to you (Mint, Google Analytics, Klout).

According to <a href=”http://christianheilmann.com/” target=”_blank”>Christian Heilmann</a> (Principal Developer Evangelist – HTML5 / Open Web – at Mozilla Corporation), <a href=”http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/” target=”_blank”>in an interview</a> to <strong>VisionMobile</strong> blog, “The use case of an application is always <strong>do</strong> something with it”.

Like everything on web, web apps are built with <strong>HTML</strong>, <strong>CSS</strong> and <strong>JavaScript</strong>, However they also use programming languages like <strong>PHP</strong>, <strong>Ruby</strong> or <strong>Python</strong>, and frameworks as <strong>Rails</strong>, <strong>Django</strong> and <strong>Scriptcase</strong> (that enter the category of RAD – Rapid Application Development). Web Apps often utilize databases, making it therefore <strong>dynamic</strong>.
<h3>So…</h3>
Here’s what you should ask yourself if you have a web design to do: How often should it be updated? Monthly? Daily? Or every hour? Will users  be able to provide content? Or are the pages static?

Your answers to such questions will be used to help you determine if what you have on hand is a <strong>website</strong> or a <strong>web app</strong>.
<h2># The cost ratio for development of both</h2>
As we have seen so far, because they are more complex and require a greater amount of programming and projection, of course the web apps require more time to complete.

Therefore, as <strong>time is literally money</strong>, there are resources that significantly reduce the development time of these projects.

In the case of websites, <strong>WordPress</strong> is almost unanimously for content management (<strong>CMS</strong>). It is a semantic platform focusing on aesthetics and web standards. It has templates that greatly facilitate the development of websites, blogs, etc.

For the sake of efficiency and reducing time and costs, <strong>Scriptcase</strong> is for web apps like WordPress is for websites, in the development process. Having connections with the databases most widely used in this market, it offers a range of applications that are common in the design of a web app. Such as: Consultations in <strong>grid</strong> format, registration <strong>forms</strong>and editing records, <strong>charts</strong>, <strong>calendars</strong>, <strong>menus</strong>, <strong>dashboards</strong> and a more extensive list of items.
<h2># In practice: How the concepts end up colliding</h2>
<img src=”http://blogbackend.scriptcase.net/wp-content/uploads/2016/06/websites-vs-webapps.jpg” alt=”Source: http://www.developereconomics.com/” width=”629″ height=”425″ />

Source: http://www.developereconomics.com/

Consider the following situation: A restaurant website has only one navigation menu and some pictures of the menu dishes. Following the concepts that we have seen, it is a <strong>website</strong>, right? Right. Let’s say it is attached, alongside the contact page, a <strong>Google Maps</strong> map. Now users can mark locations, zoom and receive directions. Would it now be a<strong>web app</strong>? Or a website with a web app in?

In fact, nowadays it is very difficult to find websites that are totally static. A vast majority have at least a contact form where the user can interact by sending a message to the site administrators.

Platforms like <a href=”https://disqus.com/” target=”_blank”>DISQUS</a> facilitated the generation of content by users, in the form of comments.
<h3>Summarizing the issue and opining</h3>
Therefore, in practice, the distinction between the concepts ends up not being so clear.In my opinion, we should use common sense when it comes to differentiating projects. A classic example of how I see this marked difference is when we compare <strong>Trello</strong> (website for management tasks) with the <strong>BuzzFeed</strong> website.

Trello is a classic web app, where in order to fulfill the purpose of the site, you need users to create and manage tasks. In the BuzzFeed case , even with the possibility to interact commenting materials and sharing them, it is better categorized as website because it does not necessarily require user interaction to meet its goal.
<h2># In conclusion: The difference between Web Apps vs Websites</h2>
Conceptually websites are static, exist to provide information and <strong>do not require</strong> user interaction to accomplish their goal. Web apps are dynamic, exist to solve a particular need and <strong>need user interaction</strong> to meet their goal.

Sites tend to be cheaper and less time-consuming to make, since they do not use programming languages or databases. Web apps generally cost more and take longer in their development.

As seen in practice, the distinction between the concepts is more complicated to apply. But if we judge the purpose of each project, we differentiate types.

I hope I have clarified your main doubts. If you liked the post, leave your comment below giving your opinion!

This post was taken from our friends from <a href=”http://www.scriptcase.net/” target=”_blank”>Scriptcase</a>.

Original post: <a href=”http://scriptcase.net/blog/web-apps-vs-websites-understand-the-difference/” target=”_blank”>Web Apps vs Websites: Understand the difference</a>

&nbsp;

PostgreSQL Advantages Nowdays

May 5th, 2016 by Darren Moore No comments »

PostgreSQL refers to a powerful open source relational database system (RDBMS). With fifteen years of active development, there is no doubt that this program has grown throughout the years to be one of the most brilliant in the market. It has a proven architecture, which has earned it an incredibly strong reputation because of a huge array of reasons such as reliability, correctness, and data integrity. One of the most notable attributes about PostgreSQL is the fact that it runs across major operating systems. Some of the platforms supported by the program are UNIX, Linux, and Windows. It is ACID compliant and has full support for foreign views, joins, keys, stored procedures, and triggers. PostgreSQL boasts of a number of advantages, which we will highlight in the discussion below.

Some of the PostgreSQL advantages include:

  • Very affordable
  • Supports transactions
  • Fully programmable
  • Supports broader subset of Search Query Language than MySQL
  • High performance and speeds

The above are just some of the most notable PostgreSQL advantages. What is for sure is that many others exist. They all come in handy to users whose numbers continue to grow as each day passes.

By using this program, you are guaranteed of saving significantly on staffing costs. This software has been designed in such a way that it gives users easy time in terms of low maintenance and tuning requirements. It is important to note that you will enjoy all these and still enjoy incredible features, high performance, and stability. Clearly, PostgreSQL advantages boasts of countless benefits.

How I Can Make Dynamic Menu Easily

May 4th, 2016 by Darren Moore No comments »

Websites are increasingly providing fly-out menus for navigation, along with other navigational system. The main reason for this is to reduce page clutter and to give user a well organized website. These menus are those which expand based on user interaction, such as pointing a mouse. The system consists of Main or Root menus, sub-menus and Items.

The preferred way to create dynamic menu (fly-out menu) is by using a HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). User can create unordered and nested menus in HTML and at the same time, CSS can be used to format sub-menus and items as well as for selective hiding/showing of the same. The downside of this approach is that if CSS is not enabled in the client browser, all menus will appear in the form of a nested list.

Another approach to creating the dynamic menu is purely using pure CSS. This can be accomplished using: hover property but works only if the browsers are capable of supporting CSS2. The menu can be made to dynamically populate sub-menu and/or item through nested lists. However, if the browsers are not capable of supporting CSS2, Javascripts may have to be used to achieve the desired results. The disadvantage of using Javascripts is that the users need to enable them in order to view the website properly.

There are also other methods available to create fly-out menus.  For example, PHP and MySQL can be used along with HTML for the purpose. However, the methods discussed earlier are the ones most widely used.

The convenience of using fly-out menus is a hot topic among web developers. Even though these provide a convenient way to present clutter free website, major challenges are still unresolved. Common challenges include users without mouse, such as screen readers, tablet PC and Smartphone users. Old browsers also pose considerable difficulty in implementing these types of web navigation systems. Another major issue is browsers not supporting Javascripts and/or users disabling them due to security concerns. Hence, advantages of dynamic web navigation system need to be carefully considered before implementation.

 

What is WEB 2.0?

May 3rd, 2016 by Darren Moore No comments »

You might ask yourself, what is WEB 2.0? Well, the term web 2.0 is simply used to refer to advanced internet technology and applications including RSS, wikis and blogs. It may also to a new generation of websites that are very interactive and user friendly. These websites have been designed in such a way that they allow those people that are using them to collaborate and share information online. These website are normally created by developing the preexisting websites that had HTML web pages. This development is done dynamically by retrieving data from a data base. It also involves the use or programming languages to come up with pages from the information that has been retrieved on the fly. This form of programming is referred to as Asynchronous JavaScript and XML (AJAX) and is what contributes to large percentage of the interactivity experienced in web 2.0 websites. This programming allows the users of web 2.0 website to connect to the web server and also to be able to download small amounts of information that exists in the background. However, a user can only use this method to download the part of a webpage that alter as a result of user interaction. This is very important because it ensures that an entire webpage does not have to be reloaded every time a change is made. This also results to a more responsive website that will give a more interactive experience to the users who visit it.

With these interactive websites, for example the social book marking website, you can also get to share all your online stored resources bookmarks. These websites are also portable or compatible with a variety of mobiles or gadgets. They also stick to the original configuration of a website page regardless of the gadget that is being used to access a website. This helps to avoid giving users a surprise through the inconsistent looks and feels of webpages every time they use a different gadget to access a website.

Web 2.0 websites are also designed in such a way that they can accommodate all sets of users. This is chiefly because different set of users have different ways that they use in dealing with issues when they are on a website. For example, there are those who just comment while there are also others who just like to rate views. All these users are given a detailed share of focus through these websites. As opposed to the non interactive website, users of web 2.0 websites also get a chance to collaborate with the stake holders of a website part from just collaborating with other users on the World Wide Web.

The web 2.0 websites also have tools that you do not have to download so as to use. Teachers and students also find it very easy to learn on how to use these tools. These tools are mostly used in editing user generated content online. They tools include: presentation tools, video tools, mobile tools, community tools and related links.

The answer to what is WEB 2.0? Can also be framed as, it is symbol of change in the perception of a developer and user. However, critics to this technology maintain that it makes it very easy for all users or average web users to alter web content. Lastly, you should take note that the AJAX technology does not update any technical specifications or design document, but instead it address the changes that are taking place in the way developers develop it and the way users interact with it.

Understanding PHP Rad Tools

April 12th, 2016 by Darren Moore No comments »

PHP rad tools are integral in web development. The tools are used in creating dynamic web pages. The created dynamic pages have command line interface that makes web development very unique.

The WebPages are usually embedded into HTML.  In recent times, use of these tools has been rampant and pages created are installed into websites. The pages are used in WordPresss, media Wiki, Drupal and Joomla. When PHP rad tools are used in execution of dynamic web pages, PHP acts as a filter that handles all files streaming online.

Many web developers have taken up the use of these tools. This is because the tools are easy to use and they give a site an exquisite look.

The tools can be used with many languages. The common languages that can be used with the tools include: MySQL, Apache and Linus.

PHP rad tools have made it possible the creation of customized PHP. Availability of customized PHP makes it easy for anyone to use PHP and create high quality websites. Currently, there is huge demand for customized PHP. This is because there are many people who want to create their own websites, but they don’t know how to code. The PHP tools make it possible for these people to realize their dreams.

Other than the tools helping users to create websites, the tools are also used in building databases, forms, reports, and many other functions.

There is so much that you can do with these tools. All you need to do is to be creative in your working.

How to Delete Windows Phone History

April 6th, 2016 by Darren Moore No comments »

Windows mobile phone is synonymous to the desktop version; therefore, if you are using a windows mobile phone you should be aware that the phone maintains browsing history of all the pages that you visit.

In case, the phone is lost or stolen, sensitive information, such as passwords may leak out and be in the wrong hands. To ensure that your information is not on the wrong hands, it’s paramount that you delete your Windows Phone History. To delete the history, this is how you go about it.

  1. Launch your internet browser on your windows mobile phone by tapping on it. When the browser opens, a menu will pop up. Tap on ‘tools’ and on the menu that will come up, tap on ‘options’.
  2. After clicking on the options, a menu will come up. Tap on ‘memory’.
  3. Tapping on the ‘memory’ tab will take you to another menu. Tap on ‘clear history’ button to delete Windows Phone History.
  4. Tap the ‘delete files’ button that will come up upon tapping ‘clear history’. Tapping on the ‘delete files’ tab will delete any cached information that may be saved in your device.
  5. After this, tap on the ‘security’ tab. A menu will pop out. Tap on ‘clear cookies’. Tapping on the ‘clear cookies’ tab will clear any cookies that might be stored in your device.

When you are done doing this, you will have deleted Windows Phone History. Deleting your phone’s history not only ensures your privacy, but it also creates more space in your device