Articles

Exciting New Tools For Designers, October 2021

,

There are some spook-tacular finds in this month’s October collection of resources and tools for designers and developers. From interesting tools that can help in the design process to boo-tiful typefaces, there’s something for everyone here.

Here’s what is new for designers this month…

Atropos

Atropos is a lightweight, open-source JavaScript library to create touch-friendly, three-dimensional hover effects. The results are stunning and have a nice parallax style. Everything is highly configurable and customizable. It’s available for JavaScript, React, and Vue.js and has zero dependencies.

CSS Gradient Editor

CSS Gradient Editor helps you create the perfect gradient style – you can start from presets – that you can use in projects. Design a background, fill, or almost any other gradient element you might need, make adjustments or customizations, and then get the CSS with one click so you can use it right away.

Octopus.do

Octopus.do is a fast visual sitemap builder that lets you work in real-time using the content brick method. Share and collaborate in real-time and there’s no signup required to use it.

Pirsch Analytics

Pirsch Analytics is a privacy-friendly, open-source alternative to Google Analytics — lightweight, cookie-free, and easily integrated into any website or directly into your backend. It includes filters to see metrics in the way you want and light and dark modes.

Basic Pattern Repository

Basic Pattern Repository is a collection of simple SVG patterns for projects. Everything is rooted in a simple style to help push projects along quicker. You can get it via GitHub or as a Figma Library.

Blobr

Blobr is a way to get a branded API portal, manage access, and monitor usage all in one place. Customize everything to fit your brand and the tool grows as you do with the ability to increase or change capacity. Plus, it is easy to set up and free to use.

HEXplorer

HEXplorer helps you better understand something you use all the time – HEX colors. This pen by Rob DiMarzo shows how the values for different colors come together to provide greater comprehension when it comes to this color format.

CCCreate

CCCreate is a curated collection of tools and resources for web creators. It includes some tools that have been around for a while as well as some newbies. Everything is grouped and sorted by type of resources – color, icons, type, layouts, animation, shapes, docs, and miscellaneous so you can find what you are looking for faster.

Glass

Glass is a photo-sharing app for photographers. It’s a social network of sorts that lets you share images with the greater photography community without “likes.” Just great images.

Revolt

Revolt is a chat app that’s still in beta and designed for easy communication without having to download apps. It’s an open-source project that is customizable and with an intuitive and recognizable interface. The thing that’s different about this app is that it is built on a privacy-first model.

Doodle Ipsum

Doodle Ipsum is the illustrated version of placeholder elements. Customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools.

Mechanic

Mechanic is an open-source framework that helps you create custom, web-based tools that export design assets in your browser. The best part is you can try it right on screen using the “poster generator.” If you like what you see, there’s plenty of documentation to help you along the way.

Medio Website Template

Medio is an agency-style website design template for Bootstrap 5. The layout is perfect for a design agency or marketing group but can be adjusted for almost any multi-purpose design. The free template includes a minimal design and includes features such as parallax, popup video, and more.

Tutorial: Simplifying Form Styles with Accent Color

This tutorial is a life-saver when it comes to using and understanding the new CSS accent-color property. This quick lesson will help make your life easier and is simple to use. It starts with setting an accent-color property on the root element and then applying it.

Houdini.how

Houdini.how is a worklet library that is full of CSS and code examples to help you work smarter. See how different elements look cross-browser and learn to adjust the code and put them together in just the way you want. Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine.

Chainstarters

Chainstarters is a powerful, rapid, Web3-enabled platform for software developers. It eliminates the burden of setting up and maintaining a secure and scalable infrastructure, allowing you to focus on creating amazing technology.

Web Vitals Robot

Web Vitals Robot is a search optimization tool that monitors SEO metrics for you – so you can prevent your business from disappearing from Google.

Searchable

Searchable is a unified search tool that looks at local, cloud storage, and apps to find the files you are looking for. It returns results in a jiffy with previews so you don’t have to open every file to find what you are looking for.

Athlone

Athlone is a fun serif with lots of personality. The free demo version includes a limited character set for personal use only and the full version has everything you need for fun display or branding with this typeface.

Capitana

Capitana is a Geometric Sans typeface with humanistic proportions and open apertures. This means that all shapes are constructed from basic forms, the circle, triangle, and square, and are designed according to the classic proportions of the Roman Antiqua. Distinct ascenders and pointed apexes with deep overshoot give it a cool beauty and classic elegance. It includes 784 characters per style in nine weights from Thin to Black, it offers both light and extremely heavy weights for striking headlines.

Colours

Colours is a funky script with just enough texture to keep it interesting. The free version includes a partial character set and is for personal use only.

Flexible

Flexible is a variable typeface that includes 18 styles in the family. It’s made for creativity and display use. This typeface is made for experimenting because there are so many things you can do with this single family.

Singo Sans Serif

Singo Sans Serif is a simple and strong typeface that would make an excellent display option. The free version is for personal use only. Fun fact: Singo means Lion in Indonesia, which is where the name of this strong font comes from.

Source

The post Exciting New Tools For Designers, October 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

7 UX Principles to Boost SERPs

,

User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website. 

Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that you need to discover the right UX strategies for everything from your website homepages to your email marketing messages and even your listings on Google. 

Today, we’re going to explore ways you can apply UX principles to your client’s image on search engines. 

Why Your Search Engine Listing Matters

Let’s start with the basics…

89% of customers start their purchasing process with a search engine. 

That means that whether you’re creating a portfolio to sell your services or building a website for a client, the first connection a customer has with your design isn’t on the homepage.

Developers and designers know that first impressions count when it comes to succeeding online. However, they assume that those first impressions happen on a social media channel, a landing page, or a home page. 

The truth is that most of the time, you’re driving a specific experience for an end-user before you even realize it. Before you can wow an audience with a beautiful site design or a fantastic CTA offer, you need to convince them to click on your Google link.

Just as UX on a website is all about giving your audience what they need in an informed and strategic manner, UX in search engine results works the same way. 

How to Make Your Search Listing Stand Out with UX

So, how do you begin to apply the principles of UX to your Google Search results?

It’s much easier than you’d think. 

Step 1: Show Immediate Value 

Delivering an excellent experience on a website often means providing end-users with the information they need as quickly as possible. Imagine designing a landing page; you wouldn’t want your audience to scroll forever to find what they need. Instead, you’d make sure that the value of the page was immediately apparent. 

When creating an image for your search engine listing, you’ll need to take the same approach. This often means thinking carefully about two things:

  • Your headline
  • Your meta description

Around 8 out of 10 users say that they’ll click a title if it’s compelling. That means that before you do anything else to improve your SEO strategy, you need to make sure that the title of your web page is going to grab the audience’s attention. 

The best titles deliver instant value.

Immediately, these titles tell the audience exactly what they’re going to get when they click onto the page. The promise drives action, while clarity highlights the informed nature of the brand. 

The great thing about using an excellent title for a page is that it doesn’t matter where you’re ranked on the search results. Whether you’re number 2 or number 5, your customers will click if they find something they want. 

It’s just like using a CTA on a landing page. Make sure your titles are:

  • Informative: Show your audience value immediately
  • Optimized for mobile: Remember, your audience might not see your full title on some screens. That means that you need to make the initial words count.
  • Easy to read: Keep it short, simple, and straightforward. Speak the end-user’s language

Step 2: Build Trust with Your URLs

Trust factors are another essential part of good UX. 

When designing a website for a new brand, you know that it’s your job to make visitors feel at ease. Even in today’s digital world, many customers won’t feel comfortable giving their money or details to a new company. 

Within the website that you design, you can implement things like trust symbols, reviews, and testimonials to enhance brand credibility. In the search engines, it all starts with your URL. 

Search-friendly URLs that highlight the nature of the page will put your audience’s mind at ease. When they click on a page about “What is SEO” in the SERPs, they want to see an URL that matches, not a bunch of numbers and symbols

Use search-friendly permalink structures to make your listing seem more authoritative. This will increase the chances of your customer clicking through to a page and make them more likely to share the link with friends. 

Once you decide on a link structure, make sure that it stays consistent throughout the entire site. If a link doesn’t appear to match the rest of the URLs that your audience sees for your website, they may think they’re on the wrong page. That increases your bounce rate. 

Step 3: Be Informative with Your Meta Description

To deliver excellent UX on a website, you ensure that your visitor can find all the answers to their most pressing questions as quickly as possible. This includes providing the right information on each page and using the correct navigational structure to support a visitor’s journey. 

In the SERPs, you can deliver that same informative experience with a meta description. Although meta descriptions often get ignored, they can provide a lot of value and help you or your client make the right first impression. 

To master your meta descriptions:

  • Use the full 160 characters: Make the most of your meta description by providing as much useful information as you can within that small space. 
  • Include a CTA: Just as CTAs help guide customers through the pages on a website, they can assist with pulling in clicks on the SERPs. A call to action like “read about the” or “click here” makes sense when you’re boosting your search image. 
  • Focus on value: Concentrate on providing your customers with an insight into what’s in it for them if they click on your listing.

Don’t forget that adding keywords to your meta description is often helpful too. Keywords will boost your chances of a higher ranking, but they’ll also show your audience that they’re looking at the right result. 

Step 4: Draw the Eye with Rich Snippets

You’ve probably noticed that the search engine result pages have changed quite a bit in the last couple of years. As Google strives to make results more relevant and informative, we’ve seen the rise of things like rich snippets. Rich snippets are excellent for telling your audience where to look. 

On a website, you would use design elements, like contrasting colors and animation, to pull your audience’s attention to a specific space. In search engines, rich snippets can drive the same outcomes. The difference is that instead of telling a visitor what to do next on a page, you’re telling them to click on your site, not a competitor’s. 

When Google introduced rich snippets, it wanted to provide administrators with a way of showcasing their best content. Rich snippets are most commonly used today on product and contact pages because they can show off reviews. 

Install a rich snippet plugin into your site if you’re a WordPress user or your client is. When you enter the content that you need into the website, use the drop-down menu in your Rich snippet tool to configure the snippet.

Ideally, you’ll want to aim for the full, rich snippet if you want to stand out at the top of the search results. Most featured snippets have both text and an image. You need to access both of these by writing great content and combining it with a relevant image. 

Step 5: Provide Diversity (Take Up More of the Results)

As a website designer or developer, you’ll know that different people will often be drawn to different things. Some of your visitors might immediately see a set of bullet-points and use them to search for the answer to their question. Other visitors will want pictures or videos to guide them. So, how do you deliver that kind of diversity in the SERPS?

The easiest option is to aim to take up more of the search result pages. Google now delivers a bunch of different ways for customers to get the answers they crave. When you search for “How to use Google my Business” on Google, you’ll see links to blogs, as well as a list of YouTube Videos and the “People Also Ask” section. 

Making sure that you or a client has different content rankings for the same keywords can significantly improve any customer’s experience on the search engines. Often, the process of spreading your image out across the SERPs is as simple as creating some different kinds of content. 

To access the benefits of video, ask your client to create YouTube videos for some of their most commonly asked questions or most covered topics. If you’re helping with SEO marketing for your client, then make sure they have an FAQ page or a way of answering questions quickly and concisely on articles, so they’re more likely to appear in “People Also Ask”.

Step 6: Add Authority with Google My Business

Speaking of Google My Business, that’s another excellent tool for improving UX in the search results. It allows business owners to manage how information appears in the search results. 

With this service, you can manage a company’s position on Google maps, the Knowledge Graph, and any online reviews. Establishing a company’s location is one of the most important things you can do to help audiences find a business quickly. Remember, half of the customers that do a local search on a smartphone end up visiting the store within the same day. 

Start by setting up the Google Business listing for yourself or your client. All you need to do is hit the “Start Now” button and fill out every relevant field offered by Google. The more information you can add to Google My Business, the more your listing will stand out. Make sure you:

  • Choose a category for a business, like “Grocery store.”
  • Load up high-quality and high-resolution images
  • Ensure your information matches on every platform
  • Use a local number for contact
  • Encourage reviews to give your listing a five-star rating

Taking advantage of a Google My Business listing will ensure that your audience has all the information they need to make an informed decision about your company before they click through to the site. This means that you or your client gets more warm leads and fewer people stumbling onto your website that might not want to buy from you. 

Step 7: Use Structured Data Markup to Answer Questions

If you’re already using rich snippets in your Google listings, you should also have a plan for structured schema markup. Schema markup on Google tells the search engines what your data means. This means that you can add extra information to your listings that will more accurately guide your customers to the support they need. 

Providing additional schema markup information to your listings gives them an extra finishing touch to ensure that they stand out from the competition. For example, you might add something like a “product price” to a product page or information about the product’s availability.

Alternatively, you could provide the people who see a search result with other options. This could be an excellent option if you’re concerned that some of the people who might come across your listing might need slightly different information. 

For instance, you can ask Google to list other pages along with your search results that customers can “jump to” if they need additional insights.

Baking structured data into your design process when you’re working on a website does many positive things. First, it makes the search engine’s job easier so that you can ensure that you or your client ranks higher. Additionally, it means that your web listings will be more thorough and valuable.

Since UX is all about giving your audience the best possible experience with a brand, that starts with making sure they get the information they need in the search results. 

Constantly Improve and Experiment

Remember, as you begin to embed elements of UX into your search engine listings, it’s essential to be aware of relevant evolutions. Ultimately, the needs of any audience can change very rapidly. Paying attention to your customers and what kind of links they click on the most will provide you with lots of valuable data. You can use Google analytics to A/B test things like titles, pictures, featured snippets, and other things that may affect UX. 

At the same time, it’s worth noting that the Google search algorithms are constantly changing too. Running split tests on different pages will give you an insight into what your customers want. However, you’ll need to keep an eye on the latest documentation about Google Search if you want to avoid falling behind the competition. 

Like most aspects of exceptional UX, mastering your SERP position isn’t a “set it and forget it” strategy. Instead, you’ll need to work on constantly expanding your knowledge if you want to show clients that you can combine UX and SEO effectively. 

Make sure you have plenty of tools set up to offer reports and insights into the kind of changes that you may need to make to align with search engine expectations. 

Making the Most of UX in the SERPS

It’s easy to forget that there’s more to UX than making your buttons clickable on mobile devices or ensuring that scrolling feels smooth. For a designer or developer to deliver excellent UX for a brand, they need to consider every interaction that a company and customer has. 

This means starting with the way a website appears when it’s listed on the search engines most of the time. Getting your SEO listing right doesn’t just boost your chances of a good ranking. This strategy also improves your reputation with your audience and delivers more meaningful moments in the buyer journey. 

Don’t underestimate the power of UX in SERPs. 

 

Featured image via Pexels.

Source

The post 7 UX Principles to Boost SERPs first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

The Pros and Cons of Tailwind CSS

,

As a utility-first CSS framework, Tailwind has rapidly become popular among developers. With its fast styling process and the freedom it offers when designing a website, it’s really no wonder why.

But how can you make sure this is the right CSS framework for your upcoming development projects? In this blog post, you’ll learn what Tailwind is, and how it differs from other frameworks like Bootstrap, or Foundation.

In addition, we will highlight the main advantages and disadvantages of the framework. By the end, you will be able to make an honest and objective assessment as to whether Tailwind is the right framework for you. So without further ado, let us dive deeper into it. 

What is Tailwind CSS?

First released in May 2019, Tailwind CSS is a front-end CSS framework. It is currently at version 2.2. Since its release, Tailwind has created quite a following. More than 260k developers have used it to enhance their design systems.

Stats like these make Tailwind one of the most popular CSS frameworks on the market, and all in less than two years. There are many reasons for this. Primarily, because its features make it the ideal choice for a wide variety of projects. Tellingly, most developers prefer it to create React projects.

The main difference between Tailwind and its competitors is that it gives developers complete control over the styling of a web application. So, is it the right CSS framework for you? To answer this question, let us take a look at Tailwind’s advantages and disadvantages.

Tailwind CSS: Pros and Cons

Tailwind CSS: Advantages

1. Control Over Styling

Tailwind is a unique CSS framework when it comes to styling web applications, meaning that Tailwind does not have a default theme that you have to use like other CSS frameworks.

For example, you can give each project a different look even if you use the same elements (color palette, size, etc.). Therefore, it’s one of the few CSS frameworks that is not opinionated on how you should style your project. 

2. Faster CSS Styling Process

There is no faster framework than Tailwind when it comes to styling HTML. As a result, you can easily create good-looking layouts by styling elements directly. This is possible because Tailwind offers thousands of built-in classes that do not require you to create designs from scratch.

Therefore, you do not have to write CSS rules yourself. These CSS classes are the main reason why building and styling with Tailwind is so fast. 

3. Responsiveness and Security 

With Tailwind’s pre-built classes, you can design the layout directly in an HTML file. This makes it a very responsive, mobile-friendly CSS framework. Apart from that, Tailwind has proven to be a stable framework since its initial release.

The framework was developed by top-notch engineers, which is why bugs and breaks are rare. 

4. Additional Features 

Tailwind CSS works in the front end of a website. For this reason, it is reasonable for developers to demand ultimate responsiveness. Well, Tailwind provides the ability to create responsive themes for your web applications and remove all unused CSS classes. With PurgeCSS, Tailwind helps you keep your final CSS as small as possible.

Tailwind CSS: Disadvantages

1. Styling and HTML are Mixed

Because you do not have to write CSS rules yourself, Tailwind works differently than most CSS frameworks. While this is great for those unfamiliar with CSS, it also means that Tailwind mixes style rules in with your HTML files.

This goes against the principle of the “separation of concerns.” Many developers prefer to separate page structure and style, claiming that classes make the Tailwind markup process verbose. 

2. It Takes Time to Learn 

Because of the built-in classes, Tailwind CSS is quite learning-intensive. Even for experienced developers, it can be a challenge to learn how to use and fully utilize the pre-built classes. But, of course, as with any other development task, practice makes perfect.

However, if you are confident and quick when it comes to writing CSS classes, Tailwind may not be the best choice for you. Even if that’s true, Tailwind generally makes CSS styling faster in the long run.  

3.  Lack of Important Components

Unlike Bulma and Bootstrap, Tailwind does not have many significant styling components. Unfortunately, this means you have to manually add features like headers, buttons, and navigation bars for web apps.

This is not a significant drawback, as experienced developers can implement these features quickly. However, you will need to spend some time doing so. 

4. Documentation 

Although Tailwind CSS has made great strides when it comes to adding guides and video tutorials, it still lags behind competitors like Bootstrap. Of course, you can always contact the developers if you have a problem.

However, keep in mind that this may take some time. For this reason, you may need to customize the framework to your needs manually.

Is Tailwind Worth Trying?

In a few words, working with Tailwind is quite different from other CSS frameworks. We have identified its main advantages and disadvantages. Based on these features, we can easily say that Tailwind is:

  • An excellent solution for developers familiar with CSS who want to speed up the creation and design process in the long run.
  • Not such a good idea if you are not familiar with CSS or do not want to spend time learning a new CSS framework. 

It becomes clear that it all depends on your personal needs and preferences. However, if saving time on CSS styling is a priority for you, you should definitely give Tailwind a try.

Regardless of whether you choose to use Tailwind or not, it’s evident that many developers use it for good reasons. Since it offers a faster styling process and is a responsive and stable framework, it’s here to stay.

Tailwind can help you save time and change the way you design websites, and so taking the time to test it out is worthwhile.

Source

The post The Pros and Cons of Tailwind CSS first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

9 Best Software Architecture Books and Sites

,

Technical leaders and senior developers often ask me about any specific books in software architecture and websites they should read to start working as software architects. I think that the developer is mature enough to develop a technical solution and he or she needs only some additional soft skills.

So, I hope that this list of books will be useful for any technology stack and domain. These books and websites give general information about architecture patterns, technical documentation, techniques to get non-functional requirements and develop soft skills.

Source de l’article sur DZONE

/par

Fluent-API: Creating Easier, More Intuitive Code With a Fluent API

,

We know that, in a software project, nothing replaces good documentation. However, it is also necessary to pay attention to how intuitive the written code is. After all, the simpler and more natural the code is, the better its experience for users.

In the simple « programming rule », in which we will forget everything we have to remember, an API that « forces » you to remember is crucial proof of failure.

Source de l’article sur DZONE

/par

22 Exciting New Tools For Designers, June 2021

,

This month’s new tools and resources collection is a mixed bag of elements for designers and developers. From fun little divots to tools that can speed up development, you are sure to find something usable here.

Here’s what new for designers this month:

June’s Top Picks

Codewell

Codewell is a service to help you learn, practice, and improve HTML and CSS skills with real templates. The benefit here is pretty obvious. When working with real templates, you can see the result of actions and changes. The tool includes free and premium options with new templates to work on weekly. Everything works in a responsive environment, and free plans have access to free challenges and a Slack community; a paid plan also includes source files and premium challenges. You need a Github login to get started.

LoomSKD

LoomSDK is an easy and reliable way to add video messaging to your product – and it’s free. The SDK enables your users to record, embed, and view with Loom videos directly within web apps – adding clarity and context to any workflow.

Pintr New Image

Pinter New Image turns photos into funky and fun line images. Upload an image with plenty of contrast, use the controls to set the look you want to achieve, and download. The new images are available as PNG or SVG. Maybe use it to create your next profile photos for social media or a nifty avatar.

Terms & Conditions Apply

Terms & Conditions Apply is a game that explains all those little pop-ups that you accept to enter and interact with websites. You are tasked with a mission to start the game: Do not accept terms and conditions, say no to notifications, and opt-out of cookies. Can you do it?

Khroma

Khroma uses artificial intelligence (via personalized algorithm) to learn what colors you love and create palettes for you to discover, search, and save for use in projects. The beta tool is easy to get started with, although you do have a little color-picking homework to get started.

6 WebTools

Mmm

Mmm is a different type of website builder. The tool, which is still in alpha, allows users to create drag and drop websites in a simple manner. It works almost like making a digital collage. Users can get a custom URL, and every page is responsive. The interface is designed so that you can even build yours on a phone. And here’s the other feature – they encourage messy designs.

LightGallery

LightGallery is a lightweight, modular, JavaScript image and video lightbox gallery plugin. It works with React.js, Vue.js, Angular, and TypeScript. It includes plenty of demos and documentation to help you make the most of this gallery tool.

Vandal

Vandal is a nifty browser extension for Firefox or Chrome that allows you to navigate back in time without changing tabs. The utility of Vandal is to allow quick and easy access to all the archived snapshots for a URL, and it supports navigation to a snapshot as well.

CSS Layout Generator

The CSS Layout Generator is a tool for creating the CSS for layout components. It is also a learning tool for teaching what is possible in CSS for positioning elements in the browser. Tweak specifications to see how it impacts the layout, CSS, and HTML.

Alpaca Data API

Alpaca Data API is an easy-to-use feed that allows you to bring in stock market data for modeling and backtesting. (it includes free and premium options based on your needs.)

Mobile Palette Generator

Mobile Palette Generator is a color-picking tool that will help you select the best hues for mobile design projects. It then shows you all the specs for primary, secondary, and accent colors.

6 Icons and UI Kits

Iconoir

Iconoir is an open-source icon repository with more than 900 SVG icons. Search icons, browse by category or poke around for what you are looking for. Everything is ready to use without signups or forms to fill out.

Pmndrs Market

Pmndrs Market has a collection of more than 300 three-dimensional elements and drawings of things for use in projects. Model renders are in a rough style with a realistic feel.

Boring Avatars

Boring Avatars is a fun collection of semi-customizable avatars without faces, hence the name. It’s a fun playground that puts a new twist on something that you might not expect to do differently.

Spark

Spark is a free download with three different website design starters. The hero images are ready to build from and are made for Figma.

Venus Design System

Venus Design System is a premium UI kit packed with more than 2,000 components and states that allow you to design fast. There’s also a demo version for you to test before you buy.

ReadyUI

ReadyUI contains more than 200 blocks and designs for agencies, developers, startups, and more. Everything is production-ready using Bootstrap and Figma files. Choose from light or dark themes and search for a design that works for your project.

5 Tutorials

Creating Generative SVG Characters

Creative Generative SVG Characters is a marriage of JavaScript and SVG that creates fun characters derived from drawings. Using shapes and a little code, you can see how to draw smooth lines, create polygons, and add other shapes for a fun feel. There’s a full demo on Codepen.

5 Steps to Faster Web Fonts

5 Steps to Faster Web Fonts helps you remove some of the bulk from popular typography options. Iain Bean explains a set of methods you can deploy to ensure that load times are quick with some applicable code snippets. Here’s a preview: Tip 1 is to use the most modern file formats (WOFF2).

The Perfect Link

The Perfect Link walks you through some accessibility checks from the A11Y Collective for linking best practices. Some of the things you think are the “right way” may be challenged here. The information goes through everything from design to semantics and is wonderfully thorough. It’s a must-read.

Readsom

Readsom is a curated collection of newsletters and emails that you can read online or sign up for. Its catchphrase is to “discover content you’ll want to read.” It is a good way to find newsletters that interest you, including plenty of design and development options that you might not otherwise know about.

Famous First Websites

Famous First Websites isn’t a tutorial per se, but it does provide a good place to do some visual learning. See what your favorite websites looked like when they launched and the evolution of the designs.

Source

The post 22 Exciting New Tools For Designers, June 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Airbus place SAP Manufacturing Execution au cœur de sa production

, ,

SAP Manufacturing Execution s’invite sur les lignes d’assemblage du géant Airbus. Une solution qui permet de faciliter le travail des opérateurs, tout en améliorant les performances des lignes de production.

Airbus est un acteur bien connu dans le monde de l’aviation civile, avec plus de 12.600 avions livrés à ses clients. C’est aussi un acteur majeur dans le monde des hélicoptères (plus de 12.000 appareils assemblés), de la défense et de l’espace.

Avant la crise sanitaire, les livraisons étaient en forte croissance (+37 % sur 5 ans) et le carnet de commandes promettait du travail aux usines d’Airbus pour les 8,5 années à venir. L’arrivée du Coronavirus et son impact massif sur les déplacements par avion ont provoqué une chute massive des activités de la société. Si l’entreprise travaille déjà sur les avions de demain, avec par exemple des modèles à l’impact carbone réduit de 25 %, elle doit aussi optimiser sa production.

« Dans ce contexte d’adaptation rapide au changement, l’introduction d’un système de pilotage de la production (MES, pour Manufacturing Execution System) va être un élément clé de notre transformation », explique Alexandre Sizaret, Head of Production System Efficiency & Manufacturing Digitalisation, Airbus. Le projet a été lancé fin 2016, mais l’arrivée de la crise lui a donné un nouvel élan.

SAP et Sopra Steria à la manœuvre

SAP Manufacturing Execution (SAP ME) est aligné avec les principes du système d’information d’Airbus, AOS (Airbus Operating System) : standardisation des processus, management visuel, suivi et amélioration continus. Il vient naturellement compléter l’ERP et le PLM au sein des usines. Enfin, son interface utilisateur simple est adaptée aux opérateurs travaillant sur des chaînes de production.

Airbus veut répondre à plusieurs challenges au travers de SAP ME : l’organisation de la production (organisation des effectifs, allocation des ressources…) ; le pilotage de l’activité (lignes de production, séquences à exécuter et avancement des séquences) ; l’interfaçage avec l’opérateur (au travers de tablettes, voire de smartphones) ; le support (détection des problèmes et alerte du manager, de la maintenance ou d’autres fonctions support).

Un core model pour toutes les usines Airbus

Pour son projet, Airbus a opté pour une approche core model associant une équipe pluridisciplinaire et multifonctionnelle. « Nous avons mis tout le monde autour de la table – opérateurs, management, intervenants métiers et techniques – afin de mettre au point une unique solution adaptée à toutes les usines, dans tous les pays », explique Alexandre Sizaret.

Après les phases de cadrage et de maquettage, la construction de la solution a été réalisée, avec une mise en place des différentes fonctionnalités de manière incrémentale. Une première version a été déployée sur des usines pilotes volontaires. L’organisation a souhaité ensuite prendre un peu de recul pour identifier les sources d’irritation. Dans le même temps, une analyse a été menée sur l’utilisation du MES et l’adhésion aux processus proposés. « Nous avons voulu vérifier que l’outil répondait bien aux besoins exprimés et qu’il était correctement utilisé. » Une importante phase de consolidation avant le déploiement à grande échelle de SAP ME.

La solution est aujourd’hui présente sur l’ensemble des sites européens du groupe : 10 usines et 2 lignes d’assemblage final. Soit un total de 279 stations de production. 7700 personnes ont été formées, dont 5500 sont des utilisateurs réguliers de SAP Manufacturing Execution. Plus de 2,4 millions d’opérations ont été effectuées sur SAP ME au cours de l’année 2020. Pour tenir cette charge, le système est réparti sur quatre sites, selon un même core model.

Au sein des sites de production, des écrans géants ont été déployés, secondés par des tablettes, smartphones et équipements IoT (scanners, lecteurs de badges…). SAP ME interagit directement avec l’ERP SAP, que ce soit pour la qualité, la conformité, la gestion des aléas, la maintenance ou encore la logistique. Il interagit aussi avec le PLM. Il est ainsi possible de visualiser pièces et maquettes en 3D et de disposer d’instructions de montage détaillées.

Plus d’efficacité au quotidien

SAP Manufacturing Execution est vu par Airbus comme un facilitateur du travail des opérateurs. Mais aussi comme un élément clé pour mesurer, soutenir et améliorer les performances des lignes de production. « Parmi les bénéfices les plus visibles, nous constatons une réduction des temps de production, des déplacements des opérateurs, de la documentation de production et plus généralement du recours aux documents papier, constate Alexandre Sizaret. Un autre bénéfice, moins facilement mesurable, est l’amélioration des performances des lignes de production, au travers d’un meilleur pilotage et d’une meilleure réactivité face aux aléas. »

Le MES est un élément clé pour épauler la production au quotidien, mais aussi un socle qui va aider  à la démocratisation de nouvelles technologies, comme les jumeaux numériques ou la maintenance prédictive. « Nous souhaitons aller vers l’opérateur 4.0 en le connectant à la bonne information, au bon moment, au travers de technologies comme la réalité virtuelle, la réalité augmentée ou l’interaction vocale avec les solutions numériques. Nous voulons également nous servir de la puissance de la data pour améliorer les processus, détecter les bonnes pratiques et prévenir les aléas. C’est un changement de paradigme qui nous permettra de basculer de la réaction à l’anticipation. »

 

En savoir plus

 

The post Airbus place SAP Manufacturing Execution au cœur de sa production appeared first on SAP France News.

Source de l’article sur sap.com

/par

How to Use GitBook for Technical Documentation

,
Intermine, where I was tasked with creating new user training documentation. For this project, I entirely rewrote the Intermine user documentation — which included images, code snippets, tables, mathematical formulas, and more — using GitBook. This guide will share my experience creating technical documentation using GitBook and act as a de-facto quick-start guide to GitBook.

What is GitBook?

GitBook is a collaborative documentation tool that allows anyone to document anything—such as products and APIs—and share knowledge through a user-friendly online platform. According to GitBook, “GitBook is a flexible platform for all kinds of content and collaboration.” It provides a single unified workspace for different users to create, manage and share content without using multiple tools. For example:

Source de l’article sur DZONE

/par

Qu’est-ce que la modélisation des données ?

, ,

La modélisation des données correspond au processus de création de diagrammes de flux de données. Lors de la création d’une structure de base de données, qu’elle soit nouvelle ou non, le concepteur commence par élaborer un diagramme illustrant la façon dont les données entreront et sortiront de la base de données. Ce diagramme est utilisé pour définir les caractéristiques des formats et structures de données, ainsi que des fonctions de gestion de base de données, afin de répondre efficacement aux exigences des flux de données. Une fois la base de données créée et déployée, le modèle de données servira de documentation expliquant les motifs de création de la base de données ainsi que la manière dont les flux de données ont été conçus.

Le modèle de données résultant de ce processus établit une structure de relations entre les éléments de données dans une base de données et sert de guide d’utilisation des données. Les modèles de données sont un élément fondamental du développement et de l’analyse de logiciels. Ils fournissent une méthode standardisée pour définir et mettre en forme les contenus de base de données de manière cohérente dans les systèmes, ce qui permet à diverses applications de partager les mêmes données.

Pourquoi la modélisation des données est-elle importante ?

Un modèle de données complet et optimisé permet de créer une base de données logique et simplifiée qui élimine la redondance, réduit les besoins en stockage et permet une récupération efficace. Elle dote également tous les systèmes de ce que l’on appelle une « source unique de la vérité », ce qui est essentiel pour assurer des opérations efficaces et garantir une conformité vérifiable aux réglementations et exigences réglementaires. La modélisation des données est une étape clé dans deux fonctions vitales d’une entreprise numérique.

Projets de développement logiciel (nouveaux ou personnalisations) mis en place par le service informatique

Avant de concevoir et de créer un projet logiciel, il doit exister une vision documentée de ce à quoi ressemblera le produit final et de son comportement. Une grande partie de cette vision concerne l’ensemble de règles de gestion qui régissent les fonctionnalités souhaitées. L’autre partie est la description des données : les flux de données (ou le modèle de données) et la conception de la base de données qui les prendra en charge.

La modélisation des données est une trace de cette vision et fournit une feuille de route pour les concepteurs de logiciels. Grâce à la définition et à la documentation complètes des flux de données et de la base de données, ainsi qu’au développement des systèmes conformément à ces spécifications, les systèmes devraient être en mesure de fournir les fonctionnalités attendues requises pour garantir l’exactitude des données (en supposant que les procédures ont été correctement suivies).

Analyses et visualisation (ou Business Intelligence) : un outil de prise de décision clé pour les utilisateurs

Avec l’augmentation des volumes de données et le nombre croissant d’utilisateurs, les entreprises ont besoin de transformer les données brutes en informations exploitables pour prendre des décisions. Sans surprise, la demande en analyse des données a augmenté de façon spectaculaire. La visualisation des données rend les données encore plus accessibles aux utilisateurs en les présentant sous forme graphique.

Les modèles de données actuels transforment les données brutes en informations utiles qui peuvent être transposées dans des visualisations dynamiques. La modélisation des données prépare les données pour l’analyse : nettoyage des données, définition des mesures et des dimensions, amélioration des données par l’établissement de hiérarchies, la définition d’unités et de devises et l’ajout de formules.

Quels sont les types de modélisation des données ?

Les trois types de modèles de données clés sont le modèle relationnel, le modèle dimensionnel et le modèle entité-association. Il en existe d’autres qui ne sont pas communément utilisés, notamment les types hiérarchique, réseau, orienté objet et à plusieurs valeurs. Le type de modèle définit la structure logique, à savoir comment les données sont stockées, organisées et extraites.

  1. Type relationnel : bien qu’« ancien » dans son approche, le modèle de base de données le plus couramment utilisé aujourd’hui est le relationnel, qui stocke les données dans des enregistrements au format fixe et organise les données dans des tables avec des lignes et des colonnes. Le type de modèle de données le plus basique comporte deux éléments : des mesures et des dimensions. Les mesures sont des valeurs numériques, telles que les quantités et le chiffre d’affaires, utilisées dans les calculs mathématiques comme la somme ou la moyenne. Les dimensions peuvent correspondre à des valeurs numériques ou textuelles. Elles ne sont pas utilisées dans les calculs et incluent des descriptions ou des emplacements. Les données brutes sont définies comme une mesure ou une dimension. Autres termes utilisés dans la conception de base de données relationnelle : « relations » (la table comportant des lignes et des colonnes), « attributs » (colonnes), « nuplets » (lignes) et « domaine » (ensemble de valeurs autorisées dans une colonne). Bien qu’il existe d’autres termes et exigences structurelles qui définissent une base de données relationnelle, le facteur essentiel concerne les relations définies dans cette structure. Les éléments de données communs (ou clés) relient les tables et les ensembles de données. Les tables peuvent également être explicitement liées, comme une relation parent/enfant, y compris les relations dites un-à-un (one-to-one), un-à-plusieurs (one-to-many) ou plusieurs-à-plusieurs (many-to-many).
  2. Type dimensionnel : moins rigide et structurée, l’approche dimensionnelle privilégie une structure de données contextuelle davantage liée à l’utilisation professionnelle ou au contexte. Cette structure de base de données est optimisée pour les requêtes en ligne et les outils d’entreposage de données. Les éléments de données critiques, comme une quantité de transaction par exemple, sont appelés « faits » et sont accompagnés d’informations de référence appelées « dimensions », telles que l’ID de produit, le prix unitaire ou la date de la transaction. Une table de faits est une table primaire dans un modèle dimensionnel. La récupération peut être rapide et efficace (avec des données pour un type d’activité spécifique stockées ensemble), mais l’absence de relations peut compliquer l’extraction analytique et l’utilisation des données. Étant donné que la structure des données est liée à la fonction qui produit et utilise les données, la combinaison de données produites par divers systèmes (dans un entrepôt de données, par exemple) peut poser des problèmes.
  3. Modèle entité-association (modèle E-R) : un modèle E-R représente une structure de données métier sous forme graphique contenant d’une part des boîtes de différentes formes pour représenter des activités, des fonctions ou des « entités », et d’autre part des lignes qui représentent des dépendances, des relations ou des « associations ». Le modèle E-R est ensuite utilisé pour créer une base de données relationnelle dans laquelle chaque ligne représente une entité et comporte des zones qui contiennent des attributs. Comme dans toutes les bases de données relationnelles, les éléments de données « clés » sont utilisés pour relier les tables entre elles.

Quels sont les trois niveaux d’abstraction des données ?

Il existe de nombreux types de modèles de données, avec différents types de mises en forme possibles. La communauté du traitement des données identifie trois types de modélisation permettant de représenter les niveaux de pensée au fur et à mesure que les modèles sont développés.

Modèle de données conceptuel

Ce modèle constitue une « vue d’ensemble » et représente la structure globale et le contenu, mais pas le détail du plan de données. Il s’agit du point de départ standard de la modélisation des données qui permet d’identifier les différents ensembles de données et flux de données dans l’organisation. Le modèle conceptuel dessine les grandes lignes pour le développement des modèles logiques et physiques, et constitue une part importante de la documentation relative à l’architecture des données.

Modèle de données logique

Le deuxième niveau de détail est le modèle de données logique. Il est étroitement lié à la définition générale du « modèle de données » en ce sens qu’il décrit le flux de données et le contenu de la base de données. Le modèle logique ajoute des détails à la structure globale du modèle conceptuel, mais n’inclut pas de spécifications pour la base de données en elle-même, car le modèle peut être appliqué à diverses technologies et divers produits de base de données. (Notez qu’il peut ne pas exister de modèle conceptuel si le projet est lié à une application unique ou à un autre système limité).

Modèle de données physique

Le modèle de base de données physique décrit comment le modèle logique sera réalisé. Il doit contenir suffisamment de détails pour permettre aux techniciens de créer la structure de base de données dans les matériels et les logiciels pour prendre en charge les applications qui l’utiliseront. Il va sans dire que le modèle physique est spécifique à un système logiciel de base de données en particulier. Il peut exister plusieurs modèles physiques dérivés d’un seul et même modèle logique si plusieurs systèmes de base de données seront utilisés.

Processus et techniques de modélisation des données

La modélisation des données est par essence un processus descendant qui débute par l’élaboration du modèle conceptuel pour établir la vision globale, puis se poursuit avec le modèle logique pour s’achever par la conception détaillée contenue dans le modèle physique.

L’élaboration du modèle conceptuel consiste principalement à mettre des idées sous la forme d’un graphique qui ressemble au diagramme des flux de données conçu par un développeur.

Les outils de modélisation des données modernes peuvent vous aider à définir et à créer vos modèles de données logiques et physiques et vos bases de données. Voici quelques techniques et étapes classiques de modélisation des données :

  • Déterminez les entités et créez un diagramme entité-association. Les entités sont considérées comme des « éléments de données qui intéressent votre entreprise ». Par exemple, « client » serait une entité. « Vente » en serait une autre. Dans un diagramme entité-association, vous documentez la manière dont ces différentes entités sont liées les unes aux autres dans votre entreprise, et les connexions qui existent entre elles.
  • Définissez vos faits, mesures et dimensions. Un fait est la partie de vos données qui indique une occurrence ou une transaction spécifique, comme la vente d’un produit. Vos mesures sont quantitatives, comme la quantité, le chiffre d’affaires, les coûts, etc. Vos dimensions sont des mesures qualitatives, telles que les descriptions, les lieux et les dates.
  • Créez un lien de vue de données à l’aide d’un outil graphique ou via des requêtes SQL. Si vous ne maîtrisez pas SQL, l’option la plus intuitive sera l’outil graphique : il vous permet de faire glisser des éléments dans votre modèle et de créer visuellement vos connexions. Lors de la création d’une vue, vous avez la possibilité de combiner des tables et d’autres vues dans une sortie unique. Lorsque vous sélectionnez une source dans la vue graphique et que vous la faites glisser dans une source déjà associée à la sortie, vous pouvez soit la joindre, soit créer une union de ces tables.

Les solutions analytiques modernes peuvent également vous aider à sélectionner, filtrer et connecter des sources de données à l’aide d’un affichage graphique de type glisser-déposer. Des outils avancés sont disponibles pour les experts en données qui travaillent généralement au sein des équipes informatiques. Toutefois, les utilisateurs peuvent également créer leurs propres présentations en créant visuellement un modèle de données et en organisant des tables, des graphiques, des cartes et d’autres objets pour élaborer une présentation basée sur des analyses de données.

Exemples de modélisation des données

Pour toute application, qu’elle soit professionnelle, de divertissement, personnelle ou autre, la modélisation des données est une étape préalable nécessaire à la conception du système et à la définition de l’infrastructure nécessaire à sa mise en œuvre. Cela concerne tout type de système transactionnel, de suite d’applications de traitement des données, ou tout autre système qui collecte, crée ou utilise des données.

La modélisation des données est essentielle pour l’entreposage de données car un entrepôt de données est un référentiel de données provenant de plusieurs sources, qui contiennent probablement des données similaires ou liées, mais disponibles sous des formats différents. Il est nécessaire de mapper en premier lieu les formats et la structure de l’entrepôt afin de déterminer comment manipuler chaque ensemble de données entrant pour répondre aux besoins de la conception de l’entrepôt, afin que les données soient utiles pour l’analyse et l’exploration de données. Le modèle de données est alors un catalyseur important pour les outils analytiques, les systèmes d’information pour dirigeants (tableaux de bord), l’exploration de données et l’intégration à tous les systèmes et applications de données.

Dans les premières étapes de conception de n’importe quel système, la modélisation des données est une condition préalable essentielle dont dépendent toutes les autres étapes pour établir la base sur laquelle reposent tous les programmes, fonctions et outils. Le modèle de données est comparable à un langage commun permettant aux systèmes de communiquer selon leur compréhension et leur acceptation des données, comme décrit dans le modèle. Dans le monde actuel de Big Data, d’apprentissage automatique, d’intelligence artificielle, de connectivité Cloud, d’IdO et de systèmes distribués, dont l’informatique en périphérie, la modélisation des données s’avère plus importante que jamais.

Évolution de la modélisation des données

De façon très concrète, la modélisation des données est apparue en même temps que le traitement des données, le stockage de données et la programmation informatique, bien que le terme lui-même n’ait probablement été utilisé qu’au moment où les systèmes de gestion de base de données ont commencé à évoluer dans les années 1960. Il n’y a rien de nouveau ou d’innovant dans le concept de planification et d’architecture d’une nouvelle structure. La modélisation des données elle-même est devenue plus structurée et formalisée au fur et à mesure que davantage de données, de bases de données et de variétés de données sont apparues.

Aujourd’hui, la modélisation des données est plus essentielle que jamais, étant donné que les techniciens se retrouvent face à de nouvelles sources de données (capteurs IdO, appareils de localisation, flux de clics, réseaux sociaux) et à une montée des données non structurées (texte, audio, vidéo, sorties de capteurs brutes), à des volumes et à une vitesse qui dépassent les capacités des systèmes traditionnels. Il existe désormais une demande constante de nouveaux systèmes, de nouvelles structures et techniques innovantes de bases de données, et de nouveaux modèles de données pour rassembler ces nouveaux efforts de développement.

Quelle est la prochaine étape de la modélisation des données ?

La connectivité des informations et les grandes quantités de données provenant de nombreuses sources disparates (capteurs, voix, vidéo, emails, etc.) étendent le champ d’application des projets de modélisation pour les professionnels de l’informatique. Internet est, bien sûr, l’un des moteurs de cette évolution. Le Cloud est en grand partie la solution car il s’agit de la seule infrastructure informatique suffisamment grande, évolutive et agile pour répondre aux exigences actuelles et futures dans un monde hyperconnecté.

Les options de conception de base de données évoluent également. Il y a dix ans, la structure dominante de la base de données était relationnelle, orientée lignes et utilisait la technologie traditionnelle de l’espace disque. Les données du grand livre ou de la gestion des stocks d’un système ERP standard étaient stockées dans des dizaines de tables différentes qui doivent être mises à jour et modélisées. Aujourd’hui, les solutions ERP modernes stockent des données actives dans la mémoire à l’aide d’une conception en colonnes, ce qui réduit considérablement le nombre de tables et accroît la vitesse et l’efficacité.

Pour les professionnels du secteur, les nouveaux outils en libre-service disponibles aujourd’hui continueront à s’améliorer. De nouveaux outils seront également introduits pour rendre la modélisation et la visualisation des données encore plus simples et plus collaboratives.

Synthèse

Un modèle de données bien pensé et complet est la clé du développement d’une base de données véritablement fonctionnelle, utile, sécurisée et exacte. Commencez par le modèle conceptuel pour présenter tous les composants et fonctions du modèle de données. Affinez ensuite ces plans dans un modèle de données logique qui décrit les flux de données et définit clairement les données nécessaires et la manière dont elles seront acquises, traitées, stockées et distribuées. Le modèle de données logique donne lieu au modèle de données physique spécifique à un produit de base de données et constitue le document de conception détaillé qui guide la création de la base de données et du logiciel d’application.

Une bonne modélisation des données et une bonne conception de base de données sont essentielles au développement de bases de données et de systèmes d’application fonctionnels, fiables et sécurisés, qui fonctionnent bien avec les entrepôts de données et les outils analytiques, et facilitent l’échange de données entre les partenaires et entre les suites d’application. Des modèles de données bien pensés aident à garantir l’intégrité des données, ce qui rend les données de votre entreprise encore plus précieuses et fiables.

Découvrez les outils modernes de modélisation des données de SAP Data Warehouse Cloud

En savoir plus

 

The post Qu’est-ce que la modélisation des données ? appeared first on SAP France News.

Source de l’article sur sap.com

/par

CERTFR-2021-ALE-007 : Vulnérabilité dans Pulse Connect Secure (20 avril 2021)

, , ,

Le 20 avril 2021, Pulse Secure a publié un bulletin de sécurité concernant la vulnérabilité CVE-2021-22893 (cf. section Documentation). Celle-ci permet à un attaquant non authentifié d’exécuter du code arbitraire à distance. Aucun correctif n’est pour l’instant disponible.

Le même …
Source de l’article sur CERT-FR

/par