News dév web

Tool Tip: Moving Letters With Anime.js and CSS

Noupe.com - 16 octobre, 2017 - 12:00

Animated font effects are real eye-catchers. Used correctly, they can enhance your design. Moving Letters provides you with 16 fantastic visuals.

The Swedish designer and developer Tobias Ahlin has an impressive backlog of references. First of all, he was one of Spotify’s first contributors and is responsible for its design. Today, he works for Mojang, developing Minecraft. On the side, now and then, he likes to toss some smaller, and some bigger side projects into the masses.

Moving Letters by Simple Means

His open source project Moving Letters, for instance, is a growing collection of animated text effects. Tobias uses CSS and JavaScript, supported by the animation engine Anime.js.

Code Snippets to Go. (Screenshot: Noupe)

The project’s website itself is an impressive piece of design, which is not lacking in animation. On the landing page, you’ll find a clear overview of all effects. A click on a text opens the respective detail view, which provides the visual effect, as well as the required code snippets in HTML, CSS, and JavaScript. This allows you to integrate the effect into your projects via a simple copy and paste.

Ahlin Provides Further Useful Tools for Web Developers

Tobias made the code available under the liberal MIT license. Thus, you can use it for free, even in client commissions. You may already know Tobias Ahlin from his other, similar projects SpinKit and TypeSource. The SpinKit displays animated status indicators, while TypeSource is a source of inspiration for the proper use of Google Web Fonts.

All three projects deserve a bookmark in every designer’s toolbox.

Catégories: News dév web

Symfony Flex: Paving the Path to a Faster, Better Symfony

SitePoint.com - 15 octobre, 2017 - 17:26

Symfony Flex is a modern replacement for the Symfony Installer, and not the name of the next Symfony version. As the intro text says:

Internally, Symfony Flex is a Composer plugin that modifies the behavior of the require and update commands. When installing or updating dependencies in a Flex-enabled application, Symfony can perform tasks before and after the execution of Composer tasks.

The new Symfony will be called just Symfony 4, and while this tutorial will deal only with the Flex tool, it will mention some Symfony 4 upgrades as well.

Still Under Development

Symfony Flex can be considered a Composer wrapper, in that it provides your Symfony project with additional options during installation and configuration. It was developed with simplicity in mind, and obviously heavily influenced by the user-friendliness of Laravel. Remember, Laravel got to its current level of popularity due to its ease of use and the low entry barrier it provides newcomers with, and Symfony wanted to emulate this.

It should be noted that both Flex and Symfony 4 are still under development, slated for release somewhere at the end of November this year (2017). As such, some of the features mentioned in this post may have changed by the time you read it, but we'll do our best to keep it up to date.

Most notably, the use of a makefile and the make tool to build a project if Symfony/Console is unavailable is still up in the air, as it seems to not be working properly on some operating systems. Fabien recently held a survey around this, asking for the community's suggestions to a replacement, and overwhelmingly, the community voted in favor of just making Symfony/Console required.

What's Different?

Most notably, Flex respects the coming Symfony 4 updates which boil down to the following major changes:

  • PHP 7+ is required
  • all folders are optional. If your project isn't using one, it doesn't have to be there. This makes the directory tree much simpler and more readable. Additionally, often useless files like .htaccess, LICENSE, and README have been removed as well - a project which needs those can easily add them.
  • there is no more web folder. Instead, there is the public folder, like in all other major frameworks. This consolidates user experience across ecosystems.
  • temporary files go under /var in the root of the project folder, with the /var/cache subfolder reserved for long term cache, like merged class files for deploying apps as read-only artifacts
  • source code goes under /src. No /app.
  • configuration goes into /config.
  • templates go into /templates.
  • Flex will have its own Symfony-verified list of packages that are referenced by one and one alias alone. So executing composer require cli will actually trigger Flex, which will look in its list of packages, find the one tagged as cli (in this case, Symfony Console), and install it. These "official" packages are called recipes, and can be found here. To accept user-submitted recipes, a flag exists in Flex's configuration which needs to be set to true: composer config extra.symfony.allow-contrib true. Those recipes can be found here. By officially endorsing some packages, Symfony is in many ways becoming as opinionated as Laravel. While this is bad in some ways, it's very good in many more ways: a consolidated, opinionated way to build Symfony apps used by most people so that everyone is on the same page.
  • bundle fragments no longer need to be custom-activated and added into a ton of files. Flex automates this, as well as their removal.
  • instead of parameters in config files, Symfony 4 will be using environment variables like Laravel
Bootstrapping

As usual, we'll assume you're already running a healthy VM environment like Homestead Improved so you can follow along.

Okay, let's get our hands dirty with an example app. All Symfony apps can now be started from the bare bones super-minimal Symfony Skeleton app:

composer create-project symfony/skeleton flexy

Notice the created directory structure.

In /public, we no longer have app.php and app_dev.php, only the index.php file. The type of the environment (test / dev / prod) is now dictated with environment variables, and reads the configuration from the /config folder.

Notice how the end of the installation process mentions that make cache-warmup was called, and that you can run make serve. This is where the new Symfony uses the "controversial" Makefile approach mentioned above. This might change.

Out of the box, opening this skeleton in the browser will throw an error because no routes have been defined yet. Let's fix this.

index: path: / defaults: { _controller: 'App\Controller\DefaultController::index' }

config/routes.yaml

We'll need to create this controller and its index action:

<?php namespace App\Controller; use Symfony\Component\HttpFoundation\Response; class DefaultController { public function index() { return new Response('Hello'); } }

This will produce a simple Hello screen, like so:

Execution Permissions

If you try to install a binary like the Symfony/Console with composer req cli, you might run into the following problem:

~ bin/console -bash: bin/console: Permission denied

This is a known hiccup when using virtual machines, and can be easily fixed by either:

  • running the console with php bin/console instead of running it directly, or
  • adding the "execute" permission to the file on the host machine (not from within the virtual machine), by executing: chmod +x bin/console. This will allow the direct execution of bin/console from within the VM then.

Continue reading %Symfony Flex: Paving the Path to a Faster, Better Symfony%

Catégories: News dév web

Print on Demand: Printify Now Lets WordPress Users Sell Shirts for $5.99

Noupe.com - 13 octobre, 2017 - 09:00

Print on demand with drop shipping is a way to monetize your brand. Now, Printify, one of the largest competitors, announced the integration of their service with self-hosted WordPress sites working with WooCommerce.

Printify is Different

Should you never have heard about print on demand and drop shipping, here is a brief explanation. These relatively new solutions allow you to create products with your design and sell them to potential customers. Once a customer buys one of your designs, the corresponding product will be printed and sent directly to your customer. You only provide the design and integrate the service into your own shop, that’s all. All of the handlings will be done with your branding. The provider itself stays entirely invisible to your customers.

There are quite a few print on demand providers out there in the wild, but Printify stands out as Printify does not offer print on demand. What? Calm down. It’s easy. Printify is a transparent provider network. They work with roughly a dozen print on demand providers as of the time of this writing to help you fulfill your demand.

Printify has more than 150 products in several variants available.

Instead of having to rely on your one and only chosen fulfillment center Printify allows you to choose between some. You might want to select a provider near you or your target market. Location is not the only filter criterion, however. You can also select by price and other parameters. Where with other services you would in the worst case be forced to look for another, Printify has alternatives within their own network.

Strong Product Base and Ripe Service

Printify is not new to the market. They are one of the most popular apps for the Shopify platform since years, and their service has absolutely grown up and is ripe for business. Their catalog of 150+ unique products includes shirts, phone cases, mugs, laptop sleeves, tote bags, pillows, blankets, shower curtains and many more.

Choose a product.

As you see, you cannot only make your own shirt but also create custom phone cases and a variety of other products. Printify’s provider network offers high-quality garments, such as Bella & Canvas 3001 or Next Level 3600, both of which are absolute bestsellers within the shirt portfolio.

Printify Products are Easy and Free to Integrate

Integration with your shop is seamless. You need not even have Photoshop skills to provide realistic product images in your store. The Printify Mockup Generator will create high-resolution 3D mockups for you that appeal to your customers and look good, no matter the device they get viewed on. Your artwork will be instantly placed on a three-dimensional product model, making the rendered images look highly realistic.

Design it.

The use of Printify’s technology is free. You only pay for the printed and delivered products, which makes the business totally risk-free for you.

Printify Goes WordPress and WooCommerce

While not everyone uses Shopify, 28% of the world’s websites run on WordPress and more than 30% of world’s eCommerce websites are powered by Woo, explains Printify CEO James Berdigan and adds, that now two out of every five stores out there will be able to use Printify which opens a massive market of millions of outlets.

See the rendered preview.

What made James Berdigan so excited, you might ask. Printify just released an integration with WooCommerce, enabling any self-hosted WordPress site owner to sell shirts and other products from right within their own WooCommerce shop. And this integration is fairly easy to accomplish as is explained in this short tutorial video:

As you can see, there is no rocket science for you to master. The administration of your shop happens comfortably from within the Printify Dashboard. Your WooCommerce instance will draw the products in automatically. That way you could use WooCommerce as just another channel to sell your goods. Products have to be maintained in one place only to serve all your outlets.

WooCommerce print on demand should definitely become part of your future monetization strategy. As you can enter this market completely risk-free, you have nothing to lose, but everything to gain.

Download the WordPress plugin from here and integrate the service as shown in the video above or documented in more detail here.

Catégories: News dév web

iOS for Webworkers: Track Expenses With Bobby 2

Noupe.com - 12 octobre, 2017 - 09:00

If there’s a lot of month to go through at the end of your money, this is either due to your income, or due to your expenses, or a deadly combination of the two. In all of these cases, Bobby 2 can help you.

Bobby 2: Expense Manager From Amsterdam

Bobby 2 by Yummygum, based in Amsterdam, NL, is a gorgeous app for the iPhone, iPad, and iPod Touch which makes managing your returning expenses easy. Not only does Bobby 2 provide a database that lets you put in your spendings with a few taps, but it also contains a ton of finished templates for common services.

Bobby 2: Landing Page

This lets you manage your payments to Spotify and Netflix in a way that is visually adjusted to their respective CI. In some cases, Bobby 2 also suggests the corresponding fee right away. This never worked for me, though, because there’s no service where I have booked the smallest plan. Those seem to be the only saved ones, though.

This is not an issue, as you can quickly alter all fees with a few taps on your keyboard. Different currencies, including EUR and USD, are supported. You can also use several currencies in parallel. That’s especially handy should you be using US-American services outside of the US.

Further Types of Expenses Are Easily Recorded

If you also want to manage your membership at the local gym with Bobby 2, this is just as simple. Set up a new expense, and you’re done. From the setup dialogue, you can influence all significant parameters. With Bobby, you can manage almost any due date. It doesn’t matter if you have to pay once a year, every seven years, or every other day, every month, or every two months, Bobby manages it for you and notifies you when the time for payment approaches. If you want to.

iOS-Typical Clarity in the Overview. (Screenshot: Noupe)

Payment circles that include time frames other than a month are broken down to the month when Bobby shows you the average monthly expenses at the very bottom of the start screen. A tap on that display lets you switch to “per year,” or “per week,” although I can’t really tell the purpose of that.

Some Features Have to be Paid

Bobby speaks English, Dutch, German, Italian, Norwegian Bokmål, Polish, Portuguese, and Spanish. Aside from the contextual parameters for each expense, the app’s UI can also be adjusted to your taste. However, these adjustments require a paid expansion of the app, which is free without it.

Securing your task management with Touch ID or passcode, as well as saving backups in iCloud, are also functions that Yummygum wants you to pay for. The same applies if you ‘re going to manage more than five subscriptions.

To be able to use all of the app’s features, I recommend buying the All-in-one Pack, which is only 2.29 EUR as of right now. If all you want is an unlimited number of subscriptions, that will be 1.09 EUR, another 1.09 EUR for the design options, and another 1.09 EUR if you want to use Touch ID and iCloud.

I paid 2.29 EUR, and I’m done. Sure, there are other task managers on the App-Store, but none is as pretty as the one with the squirrel icon.

Catégories: News dév web

Pearl: The Premium WordPress Theme With the 200+ Faces

Noupe.com - 10 octobre, 2017 - 09:00

If a premium WordPress theme suits all of your customers, yet no design looks like the other, you might be using Pearl. Let’s take a more in-depth look at it.

The Budget Problem: Who Values Pure Handcraft, Anyway?

Let’s be honest. Who wants to learn a new theme philosophy for every new project? Given the vast variety of solutions on the market, developing custom themes is only worth it in the few cases where the client is either extremely peculiar, so his brand can’t be covered using standard solutions, or so generous that you don’t need to use standard solutions to cover him. In the latter case, you might still want to look for a suitable starting point aka premium theme.

Pearl: Landing Page (Screenshot: Noupe)

In all other cases, which would be about 99 percent, you’ll fall back on a theme or a theme framework, if the goal is WordPress as a CMS. The client cares about the visuals and features. He won’t build a shrine for you if you create a unicum.

Theme or Framework or Something in Between?

While pure theme frameworks sometimes force you to worship crude control concepts, classic themes often don’t provide enough application logic for a well-positioned creative worker. The new multi-theme Pearl by Stylemix takes the middle road. It’s close to a pure premium theme’s philosophy, yet it still provides various customization options, regarding both design and functionality. The creator calls Pearl a multi-niche theme, which basically means that it lets us cover a lot of typical client groups.

Pearl: The Jack of all Trades Among the Premium Themes

For getting started quickly, Pearl offers almost a dozen of demo pages, which others would call templates, for different branches, including restaurants, artist sites (even with selling options), portfolio websites, or the health sector. The demo contents can be imported directly into your Pearl installation. This way, you get a template that you can easily edit and turn into your own. Some demos are still in the works, so you can’t use them as of right now. In this context, it is good to know that the (low) price of the theme is a one-time payment that grants you access to all future updates.

The real variety of the Pearl theme is a result of the over 200 different available page elements, that you get to use to build your dream website. No matter if it’s about sliders (including Revolution), online appointments, audio or video players, table reservations, menus, price charts, or a shop based on Woocommerce; Pearl comes with all required elements.

This is what a typical company website made with Pearl could look like. But it it could look completely different as well. (Screenshot: Stylemix)

Pearl covers a lot of the functionality via popular premium plugins. The required licenses are included and don’t need to be bought separately. Stylemix also provides specific Pearl plugins for some features. For example, you’ll find the Header Builder, which is based on Angular.js, allowing you to create a website header that deserves its name. The same applies for the Pearl Mega Menu Builder, which lets you create flexible menu structures within your navigation. Amazon sends its regards.

Example of a Navigation Menu Made Using the Pearl Mega Menu Builder. (Screenshot: Noupe)

By the way, the developers also made sure that Pearl is compatible with as many plugins as possible. With other theme creators, you might run into some unpleasant surprises in that regard. I can remember dozens of cases where a plugin installation or a simple update caused a website to blackout entirely.

Aside from the variety of design- and function-related options, the fact that Pearl is capable of making all adjustments, either visually or in a dialogue, deserves a special mention. Manually interfering with files, like writing or rewriting code, is fully redundant. Thus, Pearl is not only interesting for creative workers but also an alternative for the ambitioned DIY’er who wants to build his website by himself despite all the tedious detail work.

Create Complex Headers With the Pearl Header Builder. (Screenshot Collage: Stylemix)

In the backend of your WordPress installation, you’ll find an unusually broad access to the settings of the Pearl theme. Here’s where you take care of the basic parameters of your presence in such a detailed fashion that the only appropriate term to describe it is fiddling. This is the place for you to exert your control obsession meticulously. This does not only affect the typography, which you can edit using the hundreds of fonts from the Google Fonts Directory.

When it comes to the pages and your website’s posts, there’s an extensive WYSIWYG editor to help you out. It’s the popular Visual Composer by WPBakery, which has a price tag of 34 USD on its own. The Stylemix team did some work to the composer dashboard to grant you easy access to all Pearl modules.

The Visual Composer even lets you edit your website from within the frontend. However, if you, like me, have used WordPress since the beginning, you might be more comfortable with the backend editor.

The Performance and Support Are Nothing to be Ashamed of

Performance is one thing that Stylemix put a significant emphasis on. All benchmark services, such as GTMetrix, Google Page Speed or Pingdom, testify that the theme’s loading times are competitive, even without any further optimizations. I don’t think I need to point out that you can quickly ruin this score with three to four heavy cruisers right from your DSLR. In that sense, performance remains a continuous task, even with Pearl. The system itself is already optimized, though.

Out of the box, Pearl only supports the English language. However, the theme is fully WPML compatible, letting you create a localized version at any point. Speaking of support, I don’t want to leave out the extensive support the Stylemixers offer. There’s a 24/7 live chat available to the customers. Redeeming a classic support ticket is possible as well. Last but not least, users can help each other in the Stylemix forum.

In many cases, you won’t need this kind of help. Stylemix comes with an incredibly detailed written documentation, as well as a wide variety of tutorial videos. Pearl is pretty easy to handle, and all the videos are pure point-and-click presentations. Learning by doing is the name of the game.

Pearl: The Jewel is Not Expensive

The name Pearl was not just chosen because of how beautiful it sounds or how expensive the theme is. Instead, you’re supposed to open the theme’s shell and find your personal pearl inside. Romantic, isn’t it? Before we get sentimental, let’s take a quick look at how we can get to our new pearl.

Pearl is distributed exclusively via Envato’s Themeforest and comes in at only 35 USD during an introduction stage. If you were to purchase all the included plugins separately, you’d end up in the triple digit area.

However, I can’t tell you where the price will move to after this stage, and for how long the offer is still up. For its current price, Pearl is not just a real pearl in the ocean of premium WordPress themes, but a real steal on top of that. Take a look!

Catégories: News dév web

Fall Cleaning 2017: 10 Free WordPress Themes and How to Use Them Right

Noupe.com - 9 octobre, 2017 - 11:00

It’s time for a thorough autumn cleaning. We show you ten free WordPress themes that have just been released, and we guide you through the steps to create a proper child theme from whatever theme you choose.

Look For a Solid Starting Point

Of course could you start from scratch and create yourself a perfectly new WordPress theme beginning on an empty screen. I cannot imagine a case where this mode of operation would seem sensible to me, however. It’s much easier and more efficient to just choose a proper theme that fits your needs as closely as possible and then alter it to meet your needs perfectly. This is done by deriving a child theme from the original theme files. We will come to how this is done later on in the article.

WordPress Themes Galore: The 10 Best Free New Entries This Autumn

Let us first take a look at the hottest new entries in the free WordPress theme repository. As we know that our audience is international we will only feature themes that are translation ready.

1. Canuck Canuck

Canuck is a modern theme in grid layout that can be customized to any look you like. Flexibility is its biggest benefit.

Download on WordPressTheme Demo

2. Mercia Mercia

Mercia is a magazine theme with a heart for typography and responsiveness. It’s near perfect for any website that focuses on fast changing dynamic content.

Download on WordPressTheme Demo

3. Rinzai Rinzai

Rinzai was originally created as a motor for food-related websites, foremost those that present recipes. Its strict grid layout and visual hierarchy support that usecase ideally. Rinzai can still be used for other projects, such as portfolios or even a corporate website.

Download on WordPressTheme Demo

4. Hestia Hestia

Hestia offers quite a few child offspins already. Hestia adheres to the Material Design guidelines, thus sporting a very contemporary look. The theme is positioned towards creative workers in need of a totally flexible foundation to build any client project on. It is even WooCommerce-ready.

Download on WordPressTheme Demo

5. Neville Neville

Neville is a very visual theme. It fits best with publications that want to draw their readers into the pictures they post. Generally any magazine could use Neville but as soon as you are lacking visuals the theme would be much less impressive.

Download on WordPressTheme Demo

6. Oblique Oblique

Oblique attracts the viewer’s eye with its unusual aesthetics. Diagonal lines and asymmetrically cut images make for that special look you don’t see too often in our squares grid new world. As an example of how you can use Oblique as a corporate site take a look at one of the child themes named CoffeeIsle. Oblique is fully responsive.

Download on WordPressTheme Demo

7. HitMag HitMag

Finding a usable magazine theme was painful in the past but is not anymore. HitMag is one of the most contemporary magazine designs that I have seen in quite a while. It’s not necessarily the best for highly visual sites but does a great job for just about any other publication thinkable.

Download on WordPressTheme Demo

8. Headstart Headstart

Headstart is a very flexible theme for blogging and less dynamic websites alike. Its responsive design can be fully customized using widgets that carry almost any type of content you like. Build a dynamic blog oder build a static modern landing page. It will equally work great. Headstart is built upon the popular Foundation framework.

Download on WordPressTheme Demo

9. ClubFitness ClubFitness

ClubFitness breaks with design conventions and is the most unusual new entry this autumn. If you like Pinterest ClubFitness might just be what you need. Its heavily card-oriented layout fits best with visually heavy websites. Despite its orientation towards images it runs perfect on mobile devices as well.

Download on WordPressTheme Demo

10. Redxun Redxun

Redxun is a theme for the writers. Based on Bootstrap and giving access to all Google Fonts it offers a near perfect playground for anyone who wants to see their content strive on any platform.

Download on WordPressTheme Demo

More Great Themes

Not the right theme for you in here? Take a look at this evergrowing collection of the best WordPress themes of 2017. There is something for everyone.

What’s a Child Theme and How Do I Create One?

A child theme is the child of a full-fledged, regular theme as we’ve shown you ten of right above. It uses the files of the parent theme for display. This includes all template files, the style sheet for the design, the JavaScript – everything. That’s why both themes have to be in the theme folder wp-content/themes at all times.

Should you need more basic support with WordPress, I advise you to thoroughly read this great tutorial. It will have you covered.

All Changes Remain, Even After an Update

A newly set-up child theme looks exactly like its “parent” theme. This is the starting point for every customization of your design. From there, you can make any change you want, without any dangers, and these changes will remain even after an update of the original theme. That’s the big advantage.

Every WordPress theme that is capable of receiving updates should only be used with a child theme. It’s very simple, and in today’s article, we’ll show you the pitfalls that can break open.

The Preparation for Creating a Child Theme

To create a child design, you need an FTP program, as well as an HTML editor. You can get both for free. To work with the FTP program, you’ll also need the FTP access information for your web host. Your host will provide this information.

  • I can recommend the FTP program “FileZilla” as it’s feature-rich and free for both Windows and Mac.
  • The HTML editor I’d recommend is the program “Brackets.” It’s free as well, and due to its many expansions, it can be tailored to your needs.

Of course, there are other reasonable HTML editors. Thus, we have compiled a list of programs for Windows, and for Mac.

Creating and Using Child Themes

I’ll use WordPress’ popular Twenty Fifteen Standard Theme as an example for the creation of a child theme. You’ll learn to create a child design, use your own stylesheet for the CSS, and to adjust theme files. I will also introduce you to all tripping stones that may come up when working with child layouts.

1 – The Creation and Activation of a Basic Child Theme

A child theme only requires three things: the index to the parent theme, a style.css file, and a functions.php.

First, create a folder on your desktop, and name it “twentyfifteen-child.” Next, please create an empty file named style.css using the HTML editor. Enter the following into the CSS file:

/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: http://yourdomain.com Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter All of Your Changes at the Bottom */

This Header Defines the Following Things:

  • The name of your theme
  • The description that states that it’s a child theme of the Twenty Fifteen Theme
  • Under Template, you’ll find the “address” that your theme needs to be able to display the template files. It’s the name of the parent theme’s theme folder. When creating a child theme for another theme, of course, the folder name of your theme has to be included. So, if you need a child theme for the popular “Hueman” theme, this will say “hueman”.
  • Under Text Domain, your child theme finds the translation files, so that the theme will continue to be displayed in the language you chose.

Next, set up an empty file called functions.php. The following has to go into this file:

<?php /* ============================================================================= The functions.php for Your Child Theme ============================================================================= */ /** * This Function is Necessary. It Installs the Parent Theme's CSS * The CSS of Your Child Theme Will be Installed Automatically. */ add_action( 'wp_enqueue_scripts', 'tb_theme_enqueue_styles' ); function tb_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } /* ============================================================================= From This Point Downwards is Where You Can Enter Your Changes =============================================================================== */ Optional: Create a Preview Image For Your Theme

Each theme has a screenshot, so it is easy to tell apart from the other themes in the dashboard. All you have to do for that is to set up a preview image with the name screenshot.png. This graphic goes into the folder of the child theme. There, it has to be placed in the main index, not in a separate folder.

The recommended size is 880 x 660 pixels. However, it will be displayed in 387 x 290 pixels. The large file size allows the screenshot to be shown well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended.

2 – Activating the Child Theme

Now, upload the folder twentyfifteen-child into the theme index (wp-content/themes) of your WordPress, and activate your new child theme under “Design => Themes.”

Now, the child theme is active. Thanks to the new screenshot, it is effortless to find within your theme index. Of course, there have not been any changes made to the design yet, so your adjustments will have to follow.

The Child Theme Right After the Activation, No Changes to be Seen. 3 – Customizing Child Themes – CSS

Now, write all adjustments into your child theme’s style.css. A few very simple adjustments would be changing the background color, the color, size, and font of the header, and so on. With just a few lines of CSS, we’ve already changed the theme’s design entirely:

/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: http://yourdomain.com Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter All of Your Changes Below */ body { color: #666; background: #444; } h1.site-title { font-size: 38px; } h1.site-title a { color: #900; } #main { padding-top: 10px; } h2.entry-title { font-family: Arial, sans-serif; font-size: 38px; } h2.entry-title a { color: #900; } The Slightly Modified Child Theme Already Has a Completely Altered Appearance. 4 – Working With Template Files

Your new theme is fully customizable, you can also use your own templates, or revise the files of the parent theme. WordPress checks the child theme folder for template files first. If there are none, the files from the parent theme will be used.

This means, that a file header.php in the child theme folder is being used, instead of the file in the parent theme. If you want to change the display of a specific file, just copy it from the parent theme into your child. Now you can either change the entire presentation or add specific elements only.

Two Examples: Changing Post Images and Static Share Buttons Example 1: Reversing the Display of the Post Images

Copy the file content.php from your parent into the child folder. The original code of the file in the lines 14 to 27 looks as follows:

<?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?> <header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header>< !-- .entry-header -->

For the fun of it, let’s reverse the code, and insert the post image under the header.

<header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header> <!-- .entry-header --> <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?>

Of course, our CSS needs some adjustments, so that the final result looks superb.

/* Theme Name: Twenty Fifteen Child Description: Twenty Fifteen Child Theme Author: Your Name Author URI: http://yourdomain.com Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */ /* Enter your changes below */ body { color: #666; background: #444; } h1.site-title { font-size: 38px; } h1.site-title a { color: #900; } #main { padding-top: 10px; } h2.entry-title, h1.entry-title { font-family: Arial, sans-serif; font-size: 38px; padding-top: 20px; margin-bottom: 20px; } h2.entry-title a{ color: #900; } h1.entry-title { color: #444 } Screenshot of the Final Result: The Final Result With the Reversed Order of Image and Header. Example 2: Adding Static Share Buttons

This task is also done using the content.php file. You don’t have to place another file in the child folder.

Part 1: The Snippet for the functions.php

<?php // Copy from here /** * Static Share Buttons With Print-Button * Adjust the URL of Your Facebook-Page. The Second Link From Below. * */ function tb_share_buttons() { ?> <div class="share-container"> <div class="share-buttons"> <a class="facebook social" title="Recommend on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Teilen</span></a> <a class="twitter social" title="Recommend on Twitter" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twittern</span></a> <a class="googleplus social" title="Recommend on Google+" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a> <a class="fb-like social" href="https://www.facebook.com/TechBrain-552504691587032" target="_blank" rel="nofollow" title="Like my Facebook Page"><span>Like</span></a> <a class="print social-tooltip" href="javascript:window.print()" title="Print">Print</a> </div> </div> <?php } function tb_fontawesome() { ?> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" type='text/css' media='all' /> <?php } add_action( 'wp_enqueue_scripts', 'tb_fontawesome' );

The buttons need two functions. Number one creates the buttons, and number two adds the required icon font “Font Awesome” to your header.

Part 2: The CSS

For the buttons to be displayed correctly, we need a bit of CSS. Depending on the theme, the width of the single buttons in line nine may need to be adjusted. I have already done that for our Twenty Fifteen child.

/* ============================================================================= STATIC SHARE-BUTTONS ============================================================================= */ div.share-buttons.top {margin-top: 0 !important; max-width: 100%; margin-bottom: 15px } div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee} .share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5; max-width: 100%; display: inline-block; overflow: hidden} .share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important} .share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.print, .share-buttons a.fb-like { display: block; width: 112px; font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;} .share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important} .share-buttons a.facebook { background: #3e64ad; } .share-buttons a.twitter { background: rgb(0, 172, 237); } .share-buttons a.googleplus { background: #cd3627; } .share-buttons a.fb-like {background: #4267b2} .share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; } .share-buttons a.print{ margin-right: 0;} a.print{background:#13475e;} a.print:before{content:'\f02f';font-family:FontAwesome;font-size:16px;padding-right:8px} a.facebook:before{content:'\f09a';font-family:FontAwesome;font-size:16px;padding-right:8px} a.twitter:before{content:'\f099';font-family:FontAwesome;font-size:16px;padding-right:8px} a.googleplus:before{content:'\f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px} a.fb-like:before{content:'\f164';font-family:FontAwesome;font-size:16px;padding-right:8px}

Part 3: The Correct Placement in content.php

<?php // copy below this line, exchange the section .entry-content ?> <div class="entry-content"> <?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ) ); wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%', 'separator' => '<span class="screen-reader-text">, </span>', ) ); ?> <!-- Staic Share Buttons. Only shown with single.php --> <?php if ( is_single() ) : ?> <?php echo tb_share_buttons(); ?> <?php endif; ?> <!-- End of Static Share Buttons --> </div> <!-- .entry-content -->

The correct position is still within the DIV .entry-content, right above the closing </div> tag.

The Final Result of Our Efforts:

We get these beautifully formatted share buttons with icons for Facebook, Twitter, Google+, the Facebook page, and a button that activates the browser’s print function.

The Static Share Buttons at the End of an Article. 5 – Now, Let’s Get Serious. Including Files

One of the pitfalls when working with child themes. Many clueless beginners fail this seemingly simple task, because the snippets from the web are always meant for independent themes. That’s why they can’t work.

If you want, or have to include a file, the internet will give you the following code:

require_once( get_template_directory() . '/my_included_file.php' );

This small tag tries to load a file from the parent theme. That’s where the child theme’s templates are located. As we overwrite the parent theme’s stylesheet with ours, the following tag has to be used instead:

require_once( get_stylesheet_directory() . '/my_included_file.php' );

The tag above searches for the needed file from the child folder. Thus, always use the get_stylesheet_directory() variant, and you’ll get the desired result.

Check every snippet from the internet, to see if it has been modified for this small difference.

6 – Adding Widget Areas

Additional widget areas are possible without any problems. For example, we could create an area that wasn’t meant to contain widgets – the footer. Add the following code to the functions.php of your child theme:

<?php //Copy from here function twentyfifteen_child_widgets_init() { register_sidebar( array( 'name' => 'Footer Widget', 'id' => 'footer-widget', 'description' => __( 'An additional widget area in the footer' ), 'before_widget' => '<div class="footer-widget">', 'after_widget' => '</div>' ) ); } add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

Afterward, copy the footer.php from the “Twenty Fifteen” theme folder into your theme folder, and add this small code in beforehand:

<?php if ( is_active_sidebar( 'footer-widget' ) ) : dynamic_sidebar( 'footer-widget' ); endif; ?>

At this point in the footer.php the code seems to be in good hands:

<?php /** * The template for displaying the footer * * Contains the closing of the "site-content" div and all content after. * * @package WordPress * @subpackage Twenty_Fifteen * @since Twenty Fifteen 1.0 */ ?> </div><!-- .site-content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <?php if ( is_active_sidebar( 'footer-widget' ) ) : dynamic_sidebar( 'footer-widget' ); endif; ?> <?php /** * Fires before the Twenty Fifteen footer text for footer customization. * * @since Twenty Fifteen 1.0 */ do_action( 'twentyfifteen_credits' ); ?> <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"> <?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?> </a> </div><!-- .site-info --> </footer> <!-- .site-footer --> </div> <!-- .site --> <?php wp_footer(); ?> </body> </html> The Creation of a Child Theme From an Existing, Modified Theme

It is so much easier to create a child theme from scratch. However, if you have already modified your theme a lot, without having a child theme set up in advance, it’s still possible. You have to transfer all changes into the child theme to make sure that any updates to the parent theme don’t delete any changes.

Read the following steps, and follow them precisely. This is complicated, and hard work with a lot of fiddling.

  1. First, make a backup of your theme. To do so, use your FTP access, and copy the theme folder to your desktop. Then, create a backup of that folder, and save it somewhere else. You’ll use one of the folders to work, while the other one serves as a backup if everything goes wrong.
  2. Now, create a child theme, following the guide above. A folder, an empty stylesheet, an empty functions.php, and a screenshot.
  3. Get yourself a fresh version of your theme that has not been modified.
  4. Divide your HTML in the center, so that you can display the original file on the left, and the one from the modified theme on the right. Check every template file to see if you made changes.
  5. Transfer all modifications from the functions.php into the version of your child theme.
  6. The altered files belong into the child theme folder. Also, check if you have to swap get_template_directory() for. get_stylesheet_directory() Further information above.
  7. Now for the part that is a bit tricky. You have to compare the fresh Style.css function with the file you altered. Maybe your HTML editor has a function that lets you compare the two files, pointing out the differences. That would be helpful. I have never needed this type of function. If it is not available to you, you will have to use your own eyes to compare the files. All changes go into its own style.css file. After that, place it into the child theme folder equipped with all modifications.
  8. After you have put all altered theme files, and the extended CSS into the child theme folder, load the folder into your theme index wp-content/themes. Make sure that the fresh version of your theme is in there as well.
  9. Log into your WordPress, and make your way to the themes. Use the live preview to check your newly created child theme. If everything is displayed correctly, you’re good. If not, check, in which areas you may have overlooked something.
  10. Revise the missing elements.
  11. Then, check the entire website, and all necessary functions again, using the live preview. If everything is fine, activate your child theme, and enjoy it.
  12. Never do this again:-)
Conclusion

Now, you’ve gotten to know pretty much all important aspects of creating a child theme. Start by creating one based on one of the fine themes we presented you in this article. Which one is your favorite?

Catégories: News dév web

Web Hosting Trend 2017: Dedicated WordPress Providers on the Rise; But Why?

Noupe.com - 6 octobre, 2017 - 10:00

There are two defining trends of web hosting 2017. One is the transition from physical to virtual hosting, the so-called cloud. The other is the rise of dedicated WordPress providers.

Trends Created From Profit Expectations

Not that long ago, I wrote this article for Noupe, covering the trend of the cloud as a hosting platform. I concluded that not all of a client’s needs could be covered via cloud hosting and that there would still be a demand for cheaper offers.

Not everything that’s possible makes sense… (Cartoon: Noupe)

At the same time, there’s an upcoming trend that I can’t really understand. More and more providers have started to offer dedicated WordPress hosting, some exclusively, and some as an added service. Here, you won’t get free web space for whichever project you need to get hosted. Instead, you’ll get a complete, installed, and maintained WordPress website. Essentially, you get the same thing you can book at WordPress.com, but outside of WordPress.com.

From my point of view, there is no real problem that resulted in this offer as its solution. Instead, a problem is made up, as people assume that they can make money off it. This is some kind of “reverse product development”. Most of the time, these do not work in the long run…

WordPress Hosting: Missing the Point

Now, why is it so hard for me to understand the offer? It’s pretty simple. If I want to set up a WordPress website, I either need a good amount of expertise or a professional service provider that takes care of the work for me. If I don’t have the expertise myself, I’d rather focus on the content creation, and be happy that a third party takes care of the technology. Now you may think this was logical, and that that’s what WordPress providers were there for.

This is not right, though. The dedicated WordPress provider is no design agency. Instead, you simply get the naked system in a condition that allows it to run. Thus, you don’t have a design, a structure, SEO, no added features from plugins, nothing. Your domain is directed to a WordPress installation, that’s it. On top of that, the installation, sometimes even including installed plugins and themes, undergoes a regular backup. Of course, the host also takes care of the WordPress updates.

geralt / Pixabay

What’s the point? This offer doesn’t help people without the knowledge, as it is not extensive enough, and doesn’t make the agency or the freelancer redundant. Additionally, even some simple web space packages will give you the option to install WordPress from the backend in a few clicks.

People with the knowledge are able to create conventional WordPress installations on any web space within ten minutes; agencies and design freelancers can do that anyway. They won’t break a sweat over a proper backup either. Current WordPress versions come with automatic updates by default.

The specialized WordPress host Raidboxes relies on SSD, HTTP2, PHP7, and nginx rather than Apache, as well as server-side caching. These are a few upsides, but there’s nothing that you couldn’t find at other hosts. You’d just have to look for it.

WordPress Hosting: Expensive and Inflexible

Dedicated WordPress hosts are quite costly and inflexible when compared to conventional hosts. The hosting is always tailored towards exactly one domain. If you need another, buy another package. With a conventional hosting, you’d just add another domain for a small fee, and redirect it to a folder in the root of your webspace.

If you, as a creative person, want to free yourself from the work of a webmaster, and fully rely on WordPress for your clients, the WordPress hosting could be interesting to you. Usually, this will also fail due to the lack of flexibility, and the high costs, however.

What a dedicated WordPress hosting does guarantee is a technology package tailored to the specifics of the CMS. Raidboxes likes to point out their high level of security, and their strong performance. Sure, a provider that only hosts one platform can fully focus on that.

Hosting WordPress Instead of WordPress Hosting

On the other hand, WordPress hosting is not rocket science, and can easily be brought to a respectable level with a bit of knowledge. Find these articles on the matter here at Noupe.

Thus, I believe that the best WordPress hosting is not a WordPress hosting at the core, but a regular package that you have been able to buy for 20 years already. Pay attention to the technological aspects, and you’re not much further behind than you’d be with an expensive WordPress hosting. Here, you can find an extensive market overview across thirty different providers.

If you are not a creative worker, and you just want to run a WordPress-based blog, the best way to start is the free offer on WordPress.com. Once you’ve got a feel for the system, you can either move to a self-hosted WordPress, or connect your domain to WordPress.com, and continue your blog as part of a paid package.

StockSnap / Pixabay Conclusion: WordPress Hosting is Far From Mandatory

Because of all that, I don’t think there’s any striking reason for dedicated WordPress hosting. Of course, there are a few things to keep in mind if you want to operate WordPress yourself. However, you won’t get around building some knowledge or finding the right experts.

Thus, I recommend getting a hosting checklist, and investing the saved money into a premium theme, or commission a professional design service provider that will get you a key-ready WordPress with a layout, and all required functionality.

Even in the latter case, you should, and will have to, start learning about the system’s internals. That’s not a bad thing, as WordPress is pretty simple in comparison to others.

Catégories: News dév web

False Ambition: Am I a Designer, Developer, or Both?

Noupe.com - 5 octobre, 2017 - 10:00

I started out as a designer. At one point in time, I was forced to start developing. Now, it’s time for a reset.

We Didn’t Have Anything

This goes back to the nineties. Netobjects Fusion was the most widespread design tool, with Microsoft’s Frontpage as a close second. Fusion was made for designers. There was no encounter with the source text of a website, and it wasn’t even possible. The same applied to Frontpage. This resulted in pretty pages, but horrible source code.

Not everything was better in the old days. Ratfink1973 / Pixabay

Later on, Macromedia’s Dreamweaver, and Adobe’s GoLive joined the group, and even surpassed Fusion and Frontpage. In terms of WYSIWYG, the newcomers were superior, and in terms of code quality too. It only made sense that designers were not sad to see the pioneers of design tools leave. However, the damage had already been done.

What Could Have Been if Things Had Gone Differently

Do you write Postscript manually? No? Why not? Right, you don’t need to. Manually writing HTML would not have become necessary either, had the early tools been able to provide a proper realization of the standards, or at least established that this didn’t matter at all. Look at Word and its topsy-turvy code, that works.

Better solutions would’ve been helpful. pucho / Pixabay

Now, did the mediocre quality of early HTML design tools force all of us onto the developer track? This might seem a little over the top. At the very least, the guys from Netobjects or Microsoft won’t be the only ones to blame. However, it’s a fact that we’ve been forced to manually write code from the very beginning, which is something that print design tools never have and would never have asked from us.

Thus, we ended up dealing with unattractive code blocks, rather than appealing designs. Soon enough, this became standard. Ever since then, the code-based working has been picking up pace almost dramatically. No day passes without three dozens of brand-new, naturally awesome frameworks, boilerplates, libraries, and other tools.

Design is Only a Partial Aspect of Our Work

Design in itself has been moved to the background. The developer tasks dominate. Some may like it, but not all do. When looking at my order book, the requests of my typical client have barely changed in the past two years. However, the technological options have changed drastically. This barely matters to the average client, though, as their business goals are the same that people had twenty/thirty years ago. You can open any business studies book of the Eighties and just start reading anywhere.

That’s not beautiful… (Pexels / Pixabay)

The brand-new features that you can only make use of as a developer are not useless, of course. However, they only affect a rather small share of potential customers and are heavily overrepresented in terms of their visibility, and the buzz that is created around them.

Back to the Roots

I’m done. Instead of evaluating new tools just to realize that, after a pointless training period, I can accomplish the same thing that I accomplished before, I will now exit this rat race. I don’t want to develop a Facebook clone, and no client will ever ask me to do so.

I enjoy working on designs, not fiddling around with code. I’ve gotten angry about a missing semicolon, or a superfluous underscore countless times, once I finally found them. This has to stop.

Visual design is more fun. fancycrave1 / Pixabay

And while we’re at it. I don’t want to be a webmaster either. In the Nineties, I’ve put days of work because the mail server of client XYZ didn’t work, or appeared on some block list. Today, doing this is much clearer, and easier, thanks to proper backends. But that doesn’t make it a fun activity.

So, if I don’t want to webmaster, and don’t want to develop, which tool is the one for me? Naturally, the first thing that comes to mind is the homepage builders of the new generation. Dreamweaver and co don’t take care of the webmaster tasks, although they go pretty far in terms of cloud storage support, and management of modules, and other reusable elements.

Hello Wix

For Noupe, I’ve already looked into homepage builders several times, and I’ve also covered the topic for t3n, including the creation of a large market overview. I think I’m able to claim that I can make qualified decisions for, or against certain products.

Looking at it from this perspective, two website builders remained, namely Wix and Webydo. You’ll find a whole bunch of articles covering both of them here at Noupe. My colleague Robert Mening also created a complete website using Wix, and gave a detailed report on it.

While Webydo seems to provide the more complete package, even including billing and white labeling, Wix established the bigger business.

Why does that matter? I don’t want to act as if I was putting my entire occupational future in the hands of the system that I choose. However, it would definitely be – say – annoying should my provider end up shutting down at a moment’s notice. So, assessing how likely the worst case is, is the right thing to do in advance.

Here, I, personally, think the market leader Wix is the safest bet. German competitors have been through tough times already, so all of them are out of question for me. Webydo does offer a good product, but it appears to be moving towards some sort of final battle with Wix. In the end, one of the two will be victorious, and I feel like it will be Wix.

In terms of the feature set, the two providers are very similar, and that also applies to the learning curve and the controls. In case of doubt, it would even be possible to quickly switch between the two. This idea reinforced my decision.

By clearly focusing on Wix-based websites, I won’t lose one single customer. I can tell you that much already. The clients never cared for the technological foundation I got their designs running on. And I’ve only developed web services, mostly communities, two or three times in the past; the last time was 15 years ago.

Mental Health is always a big topic amongst designers and developers. andreas160578 / Pixabay

Psychologically, this decision is immensely easing to me. Once you’ve realized that your business doesn’t need to run at the cutting edge of the latest technologies, a lot of weight falls off.

Of course, I’ll keep staying up to date regarding new developments, but there won’t be a lot of experiments anymore. I won’t write any more code, either. From today on, I’ll only design. Just like I used to in days gone by.

Catégories: News dév web

Branding: The Perfect Logo Will Be Remembered

Noupe.com - 4 octobre, 2017 - 10:00

If a logo is truly clever is not decided by its pleasant design. It’s much more important that potential customers remember the logo.

If a client can’t even remember your logo, what kind of branding is that? Brand popularity is an asset that you should strive to have.

Branded in Memory: Study With an Interesting Approach

The sign makers of Signs.com wanted to know the state of brand popularity. They recruited 159 US-American participants for their survey “Branded in Memory”. These participants were asked to draw ten logos of popular brands, among them Apple, Ikea, and Adidas. There was no additional help on that. All they had was their own memory.

The Adidas logo drawn from memory. (Graphic: Signs.com) Over 50% of Participants Achieved at Least Good Results

As expected, the results were of very varying quality. Although the logos they were asked to draw were present in their daily lives, only 16% created almost perfect drawings. Another 37% submitted good, although not perfect, sketches.

The brands participating in the survey should be satisfied with the result, as a majority of 53% of participants recreated the logos pretty well. Naturally, the accuracy of the logo was weaker the higher the complexity of the logo in question. Still, even with complex logos, most participants used the respective colors correctly.

Logos Need to be Simple and Clear

For logo design, this confirms something that we as good designers already knew. A good logo is very simple, with bold colors, simple lines, and few details. Among the tested logos, only Apple and Starbucks took part in the experiment of forgoing their own name in the logo. Starbucks, however, ended up getting the worst test results in return. Of course, the complexity of the displayed figure is also to blame.

The study also showed that younger participants tend to be able to draw a logo with higher precision than older ones. For a while now, we’ve known that younger people in general have a much stronger reaction to advertisements than older people.

Thus, “Branded in Memory” confirms many assumptions that have been considered settled for years. The only new thing here is the perspective that this confirmation was gained from.

Catégories: News dév web

Tool Tip: Best Resume Ever, the Resume Generator for Developers

Noupe.com - 3 octobre, 2017 - 13:00

Developers are technocratic enough to have Node generate a resume for them. And, strangely, this is pretty cool.

Best-Resume-Ever is a resume generator for Node.js. Based on Vue and LESS, it doesn’t require an underlying aesthetic understanding at all. One could be cheeky and say that this was ideal for programmers.

The Templates of Best-Resume-Ever

The small tool by Sara Steiert from Stuttgart is available on Github, distributed under the liberal MIT license, allowing you to use it freely, and to actively collaborate as well. Especially additional language localizations are in demand.

As of right now, there are five different, appealing templates available for your resume. There is no need for you to design anything, simply enter your personal information into the file src/person.js. The finished curriculum vitae is exported as a PDF.

I wouldn’t install Node just for Best-Resume-Ever if I didn’t have it already. However, if you already have Node in use, this gives you a nice additional use case for your professional future.

Catégories: News dév web

Tool Tip: Banimatic Creates Banners of All Sizes

Noupe.com - 2 octobre, 2017 - 10:00

The online banner generator Banimatic generates banners of any size fully automatically. The results can be edited, and even animated, if you want to.

Chop-Chop, a Banner

Go make a banner for your website real quick. If possible, do that in six different resolutions. This sounds like it was a bit of work, and of course, it is. It’s not really an attractive task, either. If I can get help on that, I’ll gladly take it.

Banimatic is a service that automatically creates banners for, and from, websites. All Banimatic needs from you is a URL. After entering said URL on the service’s landing page, you’ll get a whole bunch of suggestions after a short wait.

Suggestions From the Robot

As the service randomly draws the images from the entered URL, and uses fonts however it likes, a majority of the results can take some getting used to. Thus, you shouldn’t close the tab after the first page of suggestions.

Works Most of the Time: Generating Ideas Via Many Suggestions

For me, the main benefit of the service is that it gives you quick access to a few ideas on what a banner could look like in a certain resolution. I also find the animation function to be rather useful. While all of them are randomly applied default animations, viewing them still sets your brain in motion.

If one of the suggestions is somewhat appealing, you should edit it. Banimatic grants you access to all design elements of the created banner. This lets you change all texts, images, and fonts. You also get to remove all elements that you believe are not needed. This is pretty flexible, and can lead to a complete banner.

Adjustable to the Last Detail

If you happen to want to edit and actually use a banner created with the service, you have to set up an account at Banimatic, and pay for the final result. You can pay via monthly subscription or on demand. 10 banner downloads will cost you about 10 USD.

You’ll have to decide for yourself if this is worth it. I only use Banimatic for a quick idea, but not for finished banners. However, I don’t want to eliminate the possibility of me actually falling back on the offer, should time constraints force me to.

Catégories: News dév web

Roundups: The Newsletter Aggregator for Designers

Noupe.com - 29 septembre, 2017 - 08:30

Newsletters and other ways of compiling design resources are a dime a dozen. Roundups.co helps you keep an overview.

The Part With the Heavy Sighs

I don’t know how you feel about this. I’m subscribed to a couple dozen newsletters, and, upon receiving them, I automatically place them into folders. Afterwards, I barely get to read them. However, I have sorted them, and who knows, I might read them later on when I have more time … No, probably not.

This is the landing page of the service Roundups.co.

Nothing is as old as yesterday’s newsletter. This doesn’t apply to every topic, but it tends to be a documented wisdom. Wouldn’t it be cool to have a newsletter that evaluates all other newsletters, only curating their best components? Yeah, that would be pretty nice.

The Part With the Vision of a Better Future

Roundups.co, developed by the English designer Joel Rosen, is that service. Roundups.co is designed as a traditional collection of newsletters and compilations for designers, apperaing to be some kind of bookmark portfolio. Every resource that Joel has picked up for us is presented with a thumbnail, and a short teaser text.

To make it easier to find your way around, Joel sorts all bookmarks into relevant categories, like Marketing, Typography, UI & UX, and many more. This allows us to limit the list to the topics we’re interested in, resulting in only receiving appropriate newsletters and roundups.

Detail View is a Big Word for the Thumbnail and the Teaser, But oh well…

The list of categories is rather long, and so is the list of curated resources. But, Roundups.co wouldn’t really do anything in terms of slowing down the information overflow, if it wasn’t for this one clever small function being that Roundups.co offers an own newsletter. This newsletter on the other hand only curates the best content from the portfolio’s collected newsletters, and it is published once a month.

If you are a hard working designer who’s constantly groaning from the burden of the deadline, this release cycle should definitely be sufficient. If it isn’t, you should reconsider your workload situation.

The Conclusion: Check it Out

Those familiar with the world of design information, will have seen a lot of offers from Roundups.co already. I was surprised how many I knew, and just ended up forgetting. Now, I’m excited for the first issue of the super mega newsletter. I hope it will be good…

Catégories: News dév web

4 Great Design to WordPress Services You Need to Try

WebAppers.com - 27 septembre, 2017 - 16:58

Advertise here via BSA

You’ve worked hard to transform your design concept into a finished design for an app or website. Yet, there is an obstacle between handing over the final design and product launch. It’s called “development”; a task that very few web designers are willing, or indeed able, to take on.

Fortunately, there are some great design to code services that can bring your design to life. The very best of these services are, as you would expect, fewer in number.

Four of the best of the best are described here:

Design to WordPress – PSD Gator

PSDgator can create any type of WordPress theme, or modify, enhance, re-slice, and re-design any WordPress site; whether it is an old one or a new one. Once they have your design in hand, they’ll review it, discuss the features you need, and create a complete theme based on your specifications.

They can accept PSD, Sketch, and AI design files, and convert them to hand-coded, SEO optimized, and responsive HTML5/CSS3 markup. They will even accept PDF design files. They can, in fact,do whatever development work you need from just about any design format you submit.

The green gator team will also be more than happy to build a WordPress plugin for you based on your specifications, or enhance an existing one.

Whether it’s a WordPress theme, a WordPress-based website, an e-Commerce project,or a PSD to newsletter project you want them to work on, they’ll be eager to do so. 

 

PSD to Manythings

PSD to Manythings is a conversion service specializing in delivering front-end solutions for design agencies, teams and individuals. As their name implies, they have the skills and experience to provide a wide range of development services, including design to WordPress conversions.

As you would expect from any premier service of this type, PSD to Manythings doesn’t just take your design files, hide behind a curtain while doing their thing, and hand you the code. They take great pains to collaborate with you throughout the development process.

They want to make sure you know what they’re doing, and how they’re doing it, and they want to make sure they fully understand what it is you want and expect. They will ask questions, and you can as well.

It won’t take long at all for you to discover why this conversion service is both a pleasure to do business with, and able to consistently deliver top-notch results.

 

Xfive

It’s a pleasure to work with a design to WordPress conversion team that treats its customers with respect. It’s rare however to find one that really seems to care for its customers, and prefers to work with them as partners.

Xfive is headquartered in Melbourne, Australia; with offices in San Francisco and Krakow. Xfive also has worldwide network of individual developers who are ready to help you with your conversion needs.

In addition to offering a friendly face, Xfive makes it a point to advertise the transparency of their development process. They are only too happy to show you, step by step, how they go about transforming your design into high-quality code.

Xfive will be more than happy to provide you with a quote for a package of hours, a team rental, or a fixed-price estimation.

 

Goodie

Goodie’s specialty is providing conversion services for individuals and small businesses who have simple, or one-page websites, or require e-mail template design and/or development services.

This 10+ year old business is somewhat unique in that it allows you to choose the person you want, to perform the conversion service for you. The call it “the Goodie way.”

 

Why Use a Design to WordPress Service?

1.Your website will have a unique, rather than a run-of-the mill look to it

WordPress and Bootstrap frameworks feature powerful website-building capabilities. But the resulting websites all too often have a somewhat similar look.

A design to WordPress service can provide layouts that tend to feature a one-of-a-kind look.
2. Faster load speeds are the norm

Your websites will generally have faster loading speeds; often much faster. It is better to hand your project over to a design to WordPress team. They will generally place a significant amount of emphasis on eliminating unnecessary code.

This results in faster load speeds. Thus, the overall improvement in your website’s usability and performance is guaranteed.

3. Professionally-done work is typically superior

Professional design to WordPress developers always ensure that everything they do is correct. They know what they’re doing, and they go about it efficiently.

4. You can expect an error-free website

Most professionals hand code instead of using automated coding devices. They also work with semantic HTML code. So, errors or omissions are easy to spot, and the code itself is much easier to maintain. With these services, you can expect error-free code every time.

5. An excellent UX will be one of the characteristics of your website

Professional design to WP developers consistently work at delivering pleasant-to-look at websites. Of even greater importance, they pay particular attention to the features and functionalities. These usually contribute to an impressive UX.

As a result, we have an increased traffic together with higher conversion rates.

 

Conclusion

You can often find tools that will do the conversion work for you. Yet, the work done by a professional design to WordPress developer will be always better.

Professional developers go about their work efficiently. Moreover, they take time to ensure everything is done right.

When you have a professional prepare your website, you can be sure you are making a wise investment.

Sponsors

Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Good Web Design: Best Practices for Modern Designers

Noupe.com - 26 septembre, 2017 - 15:00

Good Web Design is a service dedicated to collecting the best landing pages. Not limited to that, the developers also focus on details, such as the best navigation bars, or the best CTA.

We all know curated screenshot collections of modern designs. They are a dime a dozen. Unfortunately, a lot of them have suffered from their creator’s disinclination, and don’t add any new designs, or add anything the users hand in. Eldorado for link builders.

Good Web Design: Navigation Bars

Good Web Design pursues a different approach. Firstly, the creators, Charlie Feng and Yitong Zhang, didn’t get bored of it yet, allowing you to continuously find freshly curated pages. Furthermore, the two operators don’t restrict themselves to the display of landing pages as a whole but also present more specific best practices, like the best CTA, the best FAQ, or the best navigation bars.

Good Web Design: Fullscreen Preview

The service itself has a modern design, and the controls are intuitive. You can either display all entries chronologically or filter by keywords. The overview can be shown as a grid or as a list. Clicking an element opens it in a fullscreen view, but it’s not a link to the original. This way, they make sure that the example presented as a best practice cannot be made nonsense of by potential changes to the original. The link to the source can be found on the bottom right of the preview in the grid and list view, behind the word “Source.”

Aside from the option to filter individual topics using the upper navigation bar, you can use the tags of the respective preview at any time during surfing, allowing you to move through the supply associatively.

The submission of your own suggestions is appreciated as well.

Catégories: News dév web

Hixle: UI-Design Dissected

Noupe.com - 25 septembre, 2017 - 10:00

Design is not only about taste. Good design can be constructed, not just invented. The new service Hixle helps you do that.

Inspiration is Not Cheap

Inspiration itself is a good thing. But, just seeing a pretty screenshot of an app or website won’t actually do much for you. Inspiration wants to be fed more precisely.

Which tools did the designer work with? Which fonts did he use? What kind of color gradient is this? Which dominant colors, which color palette is this design based on?

Use this information to create a blueprint for you to use for your next project.

Hixle Gives You Blueprints for Your Ideas

The new service Hixle provides you with help regarding just that. Thus, it’s no surprise that Hixle’s inventor has the goal to turn the service into some starter kit for new projects. Here, Hixle is even meant to consider cultural differences. For instance, a future search query could be: “Show me the colors most US-Americans associate with joy and satisfaction. There’s no denying that this would be a great thing.

Hixle: Landing Page

As of right now, Hixle is a small but neat project, based on a WordPress installation, and it is curated manually. Hixle’s creator, the London-based product designer Balraj Chana, plans to make the project open to designers, allowing the portfolio to expand faster. Of course, Design is always a question of taste, too. In that aspect, not everyone will agree with Chana’s selection.

Currently, Hixle offers different approaches to get the desired inspiration. Access displays of entire projects from the landing page. After clicking one of the thumbnails, a modal window with detailed information on the project pops up. The information includes the used fonts, and tools, as long as Chana can make it available. He mainly relies on source code analyses for that. The dominant colors, for example, are extracted from the CSS.

Hixle: Detailed Information Palettes, Gradients, Fonts, and Tools for Your Next Project

Aside from this rather global approach, Hixle also provides direct access to palettes, gradients, fonts, and tools. The way of accessing them is always the same. All elements are visualized as a grid. You hover over this grid and click one of the elements that you’re interested in, opening a modal window with further details. Here, you’ll find out the hex values of the color palettes and gradients, which you won’t see in the project overview. Access the source of the respective tool, font, etc. from the modal.

Hixle: Collection of Palettes, Gradients, and More.

Every listed element can be shared via your social media channels, like Twitter, Facebook, LinkedIn, and Pinterest. An upvote system lets you make sure that your favorites get the attention you think they deserve. Participating is simple, but not for everyone. The only way to sign up is using Twitter or Facebook OAuth. The benefit: it’s done super fast ;-)

Conclusion: Hixle is Worth a Bookmark

Hixle has potential. Especially when the project succeeds in gaining further contributors, the service can turn into a real source of inspiration. If you’re not a fan of the authentification, don’t do it. All you’re missing out on is the participation in the voting.

Overall, Hixle has earned its spot in your bookmark collection.

Catégories: News dév web

Let’s Compare: RunCloud vs Forge vs ServerPilot

SitePoint.com - 24 septembre, 2017 - 15:20

When your website or web application has outgrown your shared hosting account, it is time to move it to the cloud, or into a virtual private server (VPS). Nowadays, VPS providers offer better value in terms of CPU and RAM resources than the shared hosting counterparts. However, I can recall when I wanted to move my website to Amazon Web Services a few years ago, and it took me days to deploy the server and get it ready with PHP, MySQL and Apache.

Fortunately, that is not the case today as we have the help of some cool tools and third party services.

I took a look at three similar services - RunCloud, ServerPilot and Laravel Forge - and compared them to see which performs best. These are SaaS tools that can help deploy, configure, manage, and monitor VPS on any cloud hosting providers like AWS, Linode, Vultr, Digital Ocean, and others.

RunCloud.io

Registration was easy. You don't need a credit card and you can even use your Facebook, Google, or GitHub account. If you don't fancy using your social media account, then just use your email address.

With RunCloud, what you need to do is deploy a fresh Ubuntu 16.04 LTS VPS on almost any VPS hosting provider. Throughout this tutorial I used a Linode VPS which costs $5 per month.

When your server is ready, you go back to RunCloud and enter your server details like the IP address to get your connection command.

You will get a very long one-line command like this.

All that you need to do is run the command in your server as the root user and let it run. It will probably take about 15 to 20 minutes for the process to complete, and once you are done, you can start to manage your server from within the web panel.

Managing Your Server

Next you need to create a Web Application. That is like a virtual host in the web server. When you do that, you can select your PHP version, and you can assign your domain name to the Web Application. You can assign more than one.

The UI is very user friendly and intuitive and you can find whatever you need rather quickly and easily. My most basic need would be to be able to create virtual hosts (Web Application), assign domain names and create databases and perhaps deploy my application from GitHub or any other Git server. There is also a script installer that supports WordPress, Joomla, Concrete5, PHPMyAdmin and a few more common PHP tools.

If you do PHP development and use Git, RunCloud supports deploying your script from GitHub, Bitbucket, Gitlab and also your own custom Git server installation.

We'll look into performance later.

ServerPilot

ServerPilot.io is probably the oldest among the three, and most well-marketed. When I ask around if anybody is using a server management tool, it will probably be ServerPilot.io.

ServerPilot.io has a Free account that you can use with limited features, and there are also the Coach ($10/mo) and Business ($49/mo) plans. Please bear in mind, these prices are for server deployments and not per account to ServerPilot.

Coach has more features like free SSL via LetsEncrypt, server health stats and other. The Business package is more like a mini NewRelic or an application performance monitoring service. You can see slow script request, application resources stats and more.

Of course the Free package is good enough, but limited compared to their Coach and Business options.

Connecting A Server

This feels similar to RunCloud. You also need a fresh Ubuntu 16.04 VPS server to start. If you have the root password to your server, you don't need to copy and paste the installer command via SSH. You can enter your server IP address and your root password, and ServerPilot will get your server ready in a few minutes.

However, if you don't want to enter the root password of your server into ServerPilot, then you can opt not to do that. You can get install run command, and copy and paste that via SSH into your server.

Honestly, server deployment process feels pretty smooth and fast. I was amazed with that. Once done, I was redirected to create an App right away. Here, an App is like the virtual host. Once that was done, there is an option to install WordPress. I thought I'd give that a try. You can also select your PHP version if you want. I selected PHP 7.1.

Managing Your Server

From registration to deploying a server and getting it up and running, the experience was really good and fast. You get a server running in no time at all.

When WordPress is an install option, I was hoping to see other PHP tools like Joomla and Concrete5 to be available as well. Unfortunately, they are not present, and ServerPilot.io also does not give the option to set where your web root should be other than /public.

Another thing that I was hoping to see is a way to deploy my application from GitHub. I can't find that. And I found out from the documentation that if I want to deploy my script via Git, I would still have to do it via SSH.

This is also the case with scheduling or crontab. If you familiar with CPanel, you would hope to have scheduling built into the web panel of ServerPilot. Unfortunately, that is not the case. You can still manage your own crontab via SSH though.

Laravel Forge

Unfortunately if you just want to try this out, there is no free-level account. Price starts at $15/mo for the Growth account, and $39/mo for the Business account. The good thing is, that is for unlimited number of server deployments. However, there is a 5-day free trial for whatever account you choose to get. And if you subscribe for an annual subscription, you get a $40 discount off the Growth account, and $69 off the Business account.

The difference between these two is mainly about adding team members into your account to help you with your server administrations. The Growth account is mostly for personal users while the Business account allows you to add team members to help you out.

Connecting a Server

Unlike ServerPilot and RunCloud, Laravel Forge will connect to your cloud hosting provider via API and deploy servers there on your behalf. With this, you don't have to deploy your server in the cloud hosting provider first, and later enter details into Laravel Forge. Laravel Forge will create them for you. For now, Laravel Forge supports Digital Ocean, AWS and Linode.

For any cloud hosting providers that are not currently supported, you can still add those into Laravel Forge under the Custom VPS option. There it works pretty much like Server Pilot and RunCloud. You will need a fresh Ubuntu 16.04 64-bit VPS, and later initiate the connect procedure in Laravel Forge. Just like RunCloud, you will need to enter the install script command via SSH.

Managing Your Server

Laravel Forge has a lot covered when it comes to managing your server. When your server is ready, you create a Site (virtual host). Since Laravel Forge is created by a PHP developer, Git is actually the main method for how you deploy your files. Or, you can get started by installing WordPress.

When creating your site, you are presented with the option to add your domain name. And you can set whether to have the wildcard sub-domain option enabled. However, there is no option for multiple domain names for a single site.

There is also Scheduling, MySQL database management and others. You can also integrate your server with Blackfire.io for application performance monitoring and Papertrail (https://papertrailapp.com/) for log analysis.

Continue reading %Let’s Compare: RunCloud vs Forge vs ServerPilot%

Catégories: News dév web

Creative Browsing With Vivaldi 1.12

Noupe.com - 22 septembre, 2017 - 11:00

The new project Vivaldi by the founder of Opera is gaining momentum. The feature set is slowly expanding towards creative workers.

Firefox, Chrome, Edge: All Similar

I can’t claim to be satisfied with the big browsers. Thus, I’m even more interested in the new version of the Vivaldi browser. Why do browsers still look the way they did ten years ago? Should I assume that the UI for website viewing programs have been declared sophisticated with a global consensus?

Noupe on Vivaldi

No, that can’t be it. Both the creators and the previous creators of Opera show that there are other approaches to displaying and equipping the browser in the future.

Vivaldi: Interesting Realization of Interesting Ideas

Vivaldi 1.12, for instance, comes with the ability to display the attributes of any desired image on a website, in a clear and visually appealing way. To do so, it reads the EXIF data. Of course, this requires the EXIF data to still be in the photo. Other browsers are able to display this data too, some only with extensions, but the way Vivaldi does it is simply beautiful, in the sense of aesthetically pleasing.

Additionally, the developer team has also taken care of the topic of file downloads. No questions are left unanswered with Vivaldi’s download panel. Here, users can see the name of the file, where it’s from, where it goes, how fast that is happening, and a lot more.

The third feature is both the most unusual, and most unnecessary one. Via the browser settings, you are able to lower the saturation of the browser’s accent colors. Supposedly, users have complained about the browser’s colors being too dominant. With the saturation settings for the accent color, you can even turn a loud red into a grey-red look. This has no use for me, but it might have one for people that don’t know what else they could ask for.

However, Vivaldi is still a visually appealing page viewer, that orients itself by the principles of flat design. Vivaldi is no feature monster, but it’s simply beautiful.

You can download Vivaldi for Windows, macOS, and Linux. Aside from the aesthetics, creative workers will also enjoy the features, like the integrated screenshot engine, as well as the various website actions, allowing you to change the font, or block content, for example. The browser itself can also be altered in all kinds of visual aspects. Go take a look for yourself.

Catégories: News dév web

WordPress: Modern Theme Development With Action Hooks

Noupe.com - 21 septembre, 2017 - 13:00

Developing excellent WordPress themes is an actual challenge. But even the seemingly easy adjusting of existing themes can become pretty tough pretty fast.

More and more developers use action hooks in their template files, as they help to keep a clear overview of the individual files, as well as the used functions. As there is very little information on working with action hooks out there, beginners and advanced users alike tend to run out of ideas quickly.

WordPress Action Hooks – an Introduction

To prevent that from happening to you, today, we’ll look into action hooks and their advantages, to save you from these frustrations.

If you want to open a WooCommerce shop, you may consider adjusting the popular Storefront theme to your needs. After opening the template file for the display of the start page, this is what you’ll see:

Welcome to the New and Clear World of Theming.

As you can see, there are no loops in this file. Other theme files of Storefront are designed like this, too. However, these files could be cleaned up even more:

Theming With Action Hooks Brought to the Boil. A Theme File Does Not Need to Contain More Than This.

Here, a single action hook takes care of the display of the star page’s content.

<?php do_action( 'homepage' ); ?> The Principle of the WordPress Action Hooks

The principle behind this is rather simple, and you already know it. WordPress already offers a couple of pre-defined hooks, which are commonly used. These include:

<?php //Well Known Action Hooks: wp_head(); wp_footer(); the_content(); the_excerpt(); ?>

The principle remains: functions are “hooked,” and either executed or displayed. Your own, custom action hooks work the same way. But what exactly is the benefit of this type of development?

The Big Advantage of This Type of Theme Development

Now, you’ll probably ask yourself what the benefit of this kind of development is. The answer is obvious. Aside from the clarity of the individual templates, there’s another unbeatable benefit:

For individually editing and adding new functions to an existing theme not a single theme file needs to be touched. The largest source of errors in custom theme files falls out completely.

Modifications and custom functions can be added to the templates without having to change these files, using action hooks. They can “magically” appear right where you want them to. Allow me to summarize:

  • Clear structures
  • Absolute clarity
  • All functions in one place
  • No adjustment of single theme files required
How to Work With WordPress Action Hooks

Once you got the hang of it, working with action hooks is pretty simple. You define your own hook, program your function, and hook it. Creating an own hook is easy, the needed function is called do_action() However, before dealing with that, there are a few things to keep in mind.

Step 1: What You Should Pay Attention to

Clarity is the most important aspect. You should collect all template functions in one file. The functions.php, however, is not the right file for this job. Create an own file for this job, where you collect all functions that work on the display of the theme.

The Storefront theme serves as a good example here, as you’ll find all template functions in the folder /inc in the file storefront-template-functions.php. I recommend setting up a file like that too. A folder /inc is the right place for this file.

However, you still need to tell WordPress about the existence of the file. One line of code in the functions.php makes sure that you file is loaded:

<?php require_once( get_stylesheet_directory(). '/inc/template-functions.php' ); ?> Properly Document Your Code

A proper documentation of your code is crucial. Assume that other people will have to understand your code as well. Even if that isn’t the case, after a year, you’ll have problems finding your way around your own theme.

A proper documentation provides a perfect overview at all times. I have solved this requirement like this:

This is what a proper documentation should look like. Even the respective folder and the files are mentioned. Schritt 2: Defining a WordPress Action Hook

Define your hook within the brackets. For example, it could be called like this:

<?php do_action( 'startpage' ); ?>

If you need to divide words, use underscores instead of hyphens.

<?php do_action( 'startpage_loop' ); ?>

Now, place this hook in the theme file, wherever you want the function to be. You are not restricted here, and you get to use your action hooks almost anywhere. Before or after the content, before or after the heading, or the comments, for example. One example is Storefront’s single.php:

The Storefront Theme’s single.php is a Good Display of the Hook’s Possibilities. Step 3: Working With the WordPress Action Hooks

Let’s use the Storefront theme’s start page as an example once more. You’ll quickly realize that working with the hooks is pretty easy to grasp. Here’s the start page’s hook once again:

<?php do_action( 'homepage' ); ?>

Now, write your functions in the file you set up for that.

<?php if ( ! function_exists( 'storefront_homepage_content' ) ) { /** * Display homepage content * Hooked into the `homepage` action in the homepage template * * @since 1.0.0 * @return void */ function storefront_homepage_content() { while ( have_posts() ) { the_post(); get_template_part( 'content', 'homepage' ); } // end of the loop. } }

Afterwards, your function is hooked and moved to the respective spot:

<?php add_action( 'homepage', 'storefront_homepage_content', 10 );

Your function will now appear on the start page. First, write the action hook, then enter the function’s name into the add_action() tag. It’s that simple.

Step 4: One Hook, Many Functions

But, how does one place many functions with a single hook? The secret lies in the priorities. The lower the priority number, the higher up the function appears. Let’s take a close look at the template:

The Storefront Theme’s Homepage File.

Seven functions share one action hook. This is possible thanks to the priorities that appear behind each hooked function. Here in the example, this ranges from priority 10 to priority 70.

These numbers determine the order of the executed functions. The ten appears at the top, the 70 at the very bottom. We distribute the priorities with the add_action() tag:

<?php // The 10 is the priority add_action( 'homepage', 'storefront_homepage_content', 10 ); Simply Sliding Functions in Between

Controlling the display of your file is that simple, and in the case of our example, you can even slide functions into the file wherever you want to. Just enter an “in-between priority” for your function.

<?php add_action( 'homepage', 'your-own-function', 15 );

Now, due to the priority, your custom function is displayed between the Storefront homepage content and the product categories.

WooCommerce: Adding Share Buttons Without Template Modifications

Every WooCommerce shop owner wants to add the important share buttons on the display of an individual product. Thanks to the action hooks, this can be done within a few minutes. The respective file that we hook our share buttons into is share.php.

The share.php With the Action Hook, Into Which We Hook Our Share Buttons.

Aside from the automatic integration of share buttons into the theme, many share button plugins give you the option to manually place the buttons. For the most part, this is done using a shortcode. The shortcode for the manual integration into the theme file looks like this:

<?php echo do_shortcode('[your-button-plugin]'); ?>

The function required for the integration into the view of a single product would look like this:

<?php /** * Implementing Share Buttons on the Page of an Individual Product */ function share_for_woocommerce() { echo do_shortcode('[dein-button-plugin]'); } add_action( 'woocommerce_share', 'share_for_woocommerce' );

As only a single function is hooked, defining priorities is not needed.

The Result:

Share Buttons in the Right Spot Without Having Touched the Template File. Perfect! Conclusion

WordPress action hooks are an excellent way to keep a theme’s files clear and structured. A good code documentation with a thought-out folder and template structure provides massive advantages, as it allows other developers to find their way around quickly.

Additionally, this modern theming is very user-friendly, as no files need to be altered to adjust a theme.

Catégories: News dév web

These are the prototyping tools to use in 2017

WebAppers.com - 20 septembre, 2017 - 10:40

Advertise here via BSA

What is the beauty of having a top-quality prototyping system at your disposal? We know – you may have no idea of the effectiveness of your proposed design until you see it up and running.

Prototyping can also make the design process more efficient! It can also speed it up, often significantly.

A prototype, whether it’s lo-fi or hi-fi, can show you want works and what doesn’t. This is especially relevant for the early stages of the design process. Prototypes give you, and your client, opportunities to explore options. Making necessary changes before proceeding will be a breeze!

Choosing any software design or development tool can be a gamble. But if you limit yourself to top-tier systems, like those described here, you’ll win every time.

Proto.io

A prototyping tool is a must for today’s web designers, and can be a useful tool for developers and product managers as well. When you can do your prototyping and your design work on the same platform, as is the case with Proto.io, you get an even better deal.

Proto.io is extremely user friendly. No coding is necessary, nor does it require any special design skills. Once it’s up and running, you can either start designing from scratch, or upload your existing design files and begin to solicit feedback and/or finalize your design.

Proto.io lets you build a low-fidelity prototype, mockup, or wireframe early on, so you can solicit feedback on your design concept, and see if you’re on the right track. Later, a high-fidelity prototype will enable you to user test a mobile app that looks and feels like the real thing, or verify your design is ready for approval and signoff. You can also make use of rapid prototyping to speed the design process up.

UXPin

The Systems plan from UXPin offers a complete end-to-end UX design solution for design and product teams.

UXPin includes design systems, responsive prototyping, documentation, developer handoff, and advanced collaboration. It also integrates with Photoshop, Sketch, JIRA, and Slack for a connected workflow.

A sample workflow could be:

1. Create your design system with Sketch or UXPin assets.
2. Add metadata to design system elements so important information follows along when you use the elements.
3. Quickly design a prototype in UXPin with elements and Symbols from your design system – or import from Photoshop and Sketch.
4. Get feedback from your team and iterate in UXPin.
5. Generate specs, CSS, and style guides for developers.

 

By bringing all these steps under one roof, UXPin makes it much easier to run an Agile design process. Definitely worth a try.

Fluid UI

If you’re looking for a prototyping tool that’s loaded with extra features, including built-in libraries, the ability to upload your existing designs, and communicate and collaborate with project stakeholders, take a close look at Fluid UI. You won’t be disappointed with what you see.

Fluid UI lets you do your design and prototyping work on your browser, and test your design on the common mobile device platforms, while communicating or sharing information with users, clients, and team members using video hangouts or live chats.

You can do all of this without ever leaving Fluid ID.

If you like freebies, give the “free forever” plan a try. This free plan allows you to work on a single project. The Solo and Pro plans allow multiple projects, plus you gain access to a wider range of libraries and other features. With the Team Plan, the number of projects you can work is unlimited.

Why Prototyping is so Important    

You have a cool idea for a design project. You dive right in and start building on that idea. When you get near the finish, you discover that your design isn’t working the way you expected it to. No surprise there.

What was missing was taking time to test your ideas as work progressed. You could make needed adjustments along the way.

Prototyping is one of the best ways to do that type of testing. Prototypes can clearly show why and where changes need to be made:

1. Progressive prototyping helps you define and define design goals. It allows your design to evolve.

It can at times seem like a tedious process that involves extra work. However, prototyping can be an extremely beneficial activity.

Progressive prototyping is often referred to as rapid prototyping. It offers a quick and efficient way to speed up the design process. At the same time, it ensures that a project’s design goals are met.

2. Prototypes show you what is working, and what needs help

There are times when even the best-looking design ideas contain a fatal flaw, and fall flat as a result. Prototyping is an excellent method for detecting these flaws. The process will point you toward a fix.

Low-fidelity prototypes can be especially effective in uncovering major design faults.

3. Identifying smaller problems that could nevertheless affect a product’s UX and performance

High-fidelity prototypes can be useful in uncovering design errors or omissions in time. The right time for this is before handing your project over to a development team.

We need to agree, making fixes tends to involve greater expense.

4. Prototypes can lead to more effective communication and collaboration

A prototype is able to give more information to a project stakeholder than a dozen meetings. The design process will be significantly speeded up. This is due to the fact that the changes based on prototypes can be made on the fly.

Conclusion

A prototype is a good design aide to have. It also serves as the type of insurance! It protects you against those design errors that could set your project back to ground zero. Also, prototyping can save you the extra expense that can come up when the developer needs to make fixes.

Prototypes also make communicating and collaboration more efficient and more effective. The top-tier prototyping tools described here provide support from project start to signoff.

Sponsors

Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Adobe Xd is THE Prototyping Tool of 2017

Noupe.com - 20 septembre, 2017 - 09:00

Prototyping, creating a first usable model of a website or app, needs to be one thing above all else: fast. The fastest tool for this purpose is Adobe Xd.

Today, I had to develop a wireframe model of a smartphone app. It wasn’t supposed to be very detailed but meant to give a comprehensible explanation of the basic concept and be presentable on a smartphone. It didn’t take me long to figure out which tool I should use. I started up Adobe Xd.

Adobe Xd: Newbie in the Creative Cloud

Adobe Xd, also known as Adobe Experience Design CC (Beta), is software available as a part of the Creative Cloud. If you’re already subscribed, you have access to the program. As it is currently in the beta for Mac and Windows, you can even use and download it for free. Setting up the required Adobe ID can be done fast, and for free.

So, at the current moment, you don’t need to be a subscriber of CC to download and use Adobe Xd. The time is now to test it.

Once the final version is out, after the beta test has concluded, the only way you’ll be able to use AdobeXd is via a CC subscription.

Fast Wireframes With Varying Details

Now, why did I start up Adobe Xd just to create a wireframe of an app? In contrast to what the product’s name may suggest, Adobe Xd does not only deal with more specific problems of UX designers. Instead, it is a general tool for the creation of designs for the web and mobile devices.

Adobe Xd Start Screen

Adobe Xd is a fast helper when it comes to wireframes. However, the software is also capable of creating interactive prototypes, screen designs, and even production ready assets. To sum it up, Adobe Xd supports the entire design process. You get to choose the level of detail.

Of course, Xd can support you from the wireframe up to the finished product, simply by continuously increasing your design’s complexity, depending on the customer feedback.

Adobe Xd: Clear Task Description and Clear Labor Division

Depending on which stage of your product you’re in, you’ll enjoy the various tools that Adobe Xd provides. At any point, it is possible to export the project stage, to get feedback from clients or team members. For example, you can create a link that allows everyone with access to the linked project to view your design, or even use it, if you selected that option. A comment feature allows for real-time feedback.

It’s also possible to view your app concept on mobile devices. To do so, move the Xd file into your Creative Cloud, where you can access it with a mobile app, available in the app stores of Android and iOS. The design can be then tested on mobile. Of course, this will be especially impressive to the client. For a quick test, the smartphone connection via USB should be the faster option, if you want to test it on a real mobile device at all.

Adobe Xd goes all in when it comes to speed. Thus, the software’s user interface is very clean and divided into two separate environments.

The design of the mockup is taken care of in the section “Design.” This is where you’re sure to spend most of the time. It’s where you create your drafts page by page, and place them next to each other on the screen. All visible image elements are designed here. The work section “Design” is where the app’s entire look is created.

In the section “Prototype,” the feel of your app is developed. Here, simple connection lines let you choose which screen element on which screen leads to another screen with a tap. This is where you work on the entire control structure. Aside from the pure targets, you also get to define various transition effects, as well as easings and their duration.

Connections Between the Drawing Areas Are Represented by Lines.

The fastest form of the preview is the program functionality simply called “preview.” It opens your mockup in a separate window, which has the size of the target resolution. This should be sufficient for the first review, and your own purposes. Distributions via links or the presentation on the phone are only worth it once other project participants come into play. In a later version, it will be possible to collaborate in real time using the Creative Cloud, as shown by Google Docs or Office365.

Adobe Xd: Efficiency is Key

What impresses me the most are the effective tools that Adobe Xd presents in the “Design” section. For instance, there’s the control panel “Elements.” Here, you get to deposit design elements, like colors or fonts, to let you pick them back up at a later point in your design. This is also where you save so-called symbols. These could be icons, for example, which can then be adjusted over the course of the entire project by just editing the stored symbol.

In general, you can transfer the formatting of any object to other objects by copying it. It is also useful to know that the text tool always keeps the settings of the previous text. Thus, you can quickly add text in the correct formatting, of which you, as a sound designer, only have three or four.

Very Clean! In Adobe Xd, You Get to View All Design Components at Once.

The so-called repeat grid allows you to quickly add a grid or a formatted list without having to manually add every single element of the list or table. All you need to do is create an object, and multiply it with the Repeat Grid.

Speaking of grids. Adobe Xd offers many ways to level your design elements. Various help lines tell you where your element is currently positioned within the design. It can easily be aligned with the top or bottom border.

Just drag images you want to use in the design into the respective drawing area via drag and drop. Specific masks make sure that your images are automatically adjusted to the defined design parameters.

As we know it from other Adobe applications, design parts can be grouped, letting you edit these groups in a later step, while preventing individual elements of the group from being moved or altered in other ways.

Once your prototype is matured to the point where it’s time to produce the assets for the developer of your app’s code parts, Adobe Xd’s export function comes into play. Depending on the target platform (Web, iOS, or Android), the software makes sure that all required assets are exported. The export is done as an SVG, or PNG. An additional PDF export allows you to distribute the concept in the reader format.

Adobe Xd: Fast, Catchy, and Available for Both Large Operating Systems

My app mockup took me half an hour. It didn’t contain any production-ready assets, as it was a classic wireframe. Nonetheless, the presentation on my smartphone was able to illustrate my ideas well enough for all project members. Did I mention that I’ve been a subscriber of the Creative Cloud for years as it is? For me, this subscription has gained a lot of value with Adobe Xd.

If you want to mention Sketch as an alternative, let’s get to this straight away. Sure, Sketch is an excellent product. However, it takes a lot longer to get to a result, as it focuses more on the creation of production-ready assets than rapid prototyping. On top of that, it’s only available for macOS, while Adobe Xd runs on both macOS and Windows.

For a quick start, Adobe offers a whole bunch of video tutorials. This way it will take you a maximum of 19 minutes to be able to use the software productively.

You can find the mobile app for the presentation on smartphones here:
Catégories: News dév web

Pages

S'abonner à ybresson.com agrégateur - News dév web

Contact

Une question, une remarque ?
Une demande de devis ?

Contactez-moi

A propos...

Yves Bresson, ingénieur en informatique, consultant freelance, spécialisé dans le développement web (CMS, PHP, Laravel, Ajax, jQuery, Bootstrap, HTML5, CSS3) et d'applications mobiles (iPhone, Android). Voir le profil de Yves Bresson sur LinkedIn