Menu
La techno en question, un regard sur le Google Home et la concurrence

La techno en question, un regard sur le Google Home et la concurrence

GOOGLE HOME, Amazon Alexa, Apple HomePod. Entre autres “smart speakers” (ou haut-parleurs intelligents).
La famille des “choses” intelligentes continue de s’agrandir et ces futures stars du Noël à venir font bien plus que simplement jouer de la musique.
Posé sur votre table de chevet, décorant une étagère ou bien trônant au milieu du salon, Google Home est à l’écoute et disponible pour répondre à toute commande vocale. La technologie fonctionne sur les mêmes bases que Google Assistant et son système activé par la voix. Il peut définir une alarme, vous donner la météo, s’enquérir de l’état du trafic routier, jouer à un jeu, vous raconter des blagues ou, tout simplement, procéder à une recherche … sur Google.
L’enceinte se synchronise avec votre compte Google lors de la mise en marche et peut ainsi vous annoncer vos rendez-vous à venir si vous le lui demandez. Fonctionnalité pratique, vous pouvez également lui dicter une liste de courses. Sinon, de manière logique, vous pouvez lui demander de jouer votre musique (ou bien celle issue de diverses plateformes sur lesquelles vous disposez de comptes) et elle peut même accepter vos requêtes particulières – du genre « musique pour travailler ».
Il ne faut pas oublier les fonctions “maison intelligente”. Google Home peut se connecter aux autres systèmes intelligents dans la maison. Comme, par exemple, les ampoules “intelligentes” (et à commande vocale) Philips Hue. Et si vous disposez également d’un Google Chromecast branché sur votre télévision, vous pouvez demander à votre enceinte Google Home de lancer des vidéos Netflix, YouTube ou autre directement sur votre grand écran télé.
A noter que la capacité de Google Home à comprendre le langage parlé est impressionnante – et permet de faciliter l’adoption de l’outil. Vous voulez les dernières infos ? Il vous suffit de lancer un “Hey Google, quelles sont les dernières nouvelles ? “. Ou bien, “donnes moi les dernières nouvelles”. Ou bien “lance le journal télé”. A vous de tester les limites. Tout en gardant en mémoire le fait que le patois, tout comme le verlant, risque de ne pas bénéficier du même degré de compréhension. Oui, Google Home est civilisé et parle un langage courant.
Par ailleurs, les micros intégrés permettent à l’enceinte de différencier les voix et, par extension, donner des réponses différentes – et personnalisées – aux différents membres de la famille. Solide. Cependant, il risque d’y avoir débat quand toute la famille va commencer à demander son “programme tv préféré” 🙂 … .
Les fonctions de l’enceinte Google Home’ sont nombreuses – et peut-être pas toutes nécessaires (bien que de lui faire imiter des cris d’oiseaux puisse être marrant … 30 secondes) – mais la facilité d’usage et la qualité, constante, vous ouvre la porte pour jouer avec l’enceinte et découvrir de nouvelles manières d’utiliser Google Home pour vous faciliter la vie.

La concurrence

Amazon Echo

L’enceinte Echo – voire Dot ou Tap – est relativement similaire à Google Home à ceci prèt qu’elle utilise l’assistant Alexa au lieu de Google.
De la même manière, cependant, Alexa est connectée avec le monde Amazon – et sa dimension shopping – vous permettant ainsi de passer commande directement depuis l’enceinte.
Comme on a pu le voir, l’enceinte semble également pouvoir passer commande par elle-même (ou tout au moins réagir aux messages entendus sur la radio ou télé).
Attention au programme que vous regardez … .

Apple HomePod

Après Google Assistant et Amazon Alexa, cette enceinte fait entrer Siri (l’assistant Apple) dans votre salon. Le HomePod utilise la plateforme maison intelligente dédiée d’Apple (HomeKit) et pourrait également permettre aux utilisateurs Android de s’y connecter.
Un bon moyen de grignoter, éventuellement, quelques parts de marché chez Google.
HomePod fonctionne avec un abonnement Apple Music et peut définir automatiquement sa position dans une pièce afin d’adapter les réglages musique pour optimiser le son.
Alors que Noël arrive, le futur est lancé également. Qui n’a jamais voulu discuter avec sa maison ? En attendant d’ouvrir les paquets m’attendant dans mes petits souliers, je continue à hurler à la lune (ou tout simplement maugréer dans le noir sans trouver l’interrupteur qui sauverait mon petit orteil d’une rencontre maudite et sanglante avec un coin de table basse).

Vivement Google Home … .

Etes-vous contrôlés par les réseaux sociaux ?

Etes-vous contrôlés par les réseaux sociaux ?

Nous vivons désormais dans un monde dominé par les réseaux sociaux. En moyenne, nous passons environ deux heures (116 minutes) sur les réseaux, chaque jour. Un total de 5 années et 4 mois sur la durée de votre vie … . Et le temps passé ne fait qu’augmenter à mesure que les différentes plateformes se développent. Nos vies deviennent digitales et artificielles, laissant de côté la réalité et l’instant. Alors, comment reprendre – autant que faire se peut – le contrôle sur votre vie et vous détacher des réseaux sociaux ? Voici quelques conseils pour vous.

Réservez du temps pour vous


Certes les réseaux sociaux sont, au final, des réseaux centrés sur l’individu et son égo mais prendre le temps de se concentrer sur son-même, hors du monde digital, est une démarche importante. Reprendre la main sur le soi réel et s’intéresser à sa propre santé, physique et mentale. Est-ce que votre joli selfie et sa phrase de motivation, “le plus beau des accessoires que vous puissiez porter est un sourire” (en passant, un cliché bien fatigué) reflètent réellemet votre état d’esprit ? Illustrer le bonheur est une chose; le vivre une toute autre chose.

Prenez du temps pour vous, loin du monde digital. Faites une sieste, lisez un livre, lancez vous dans le jardinage ou bien faites du sport. Concentrez vous sur vous mais, surtout, ne le partagez pas en ligne.

On – Off


Dans la lancée de prendre du temps pour vous-même, bloquez des plages horaires pendant lesquels vous allez éteindre votre smartphone – et autres gadgets. Que ce soit au travail (éteignez votre mobile pendant 30 minutes et triplez votre productivité) ou bien à la maison (utilisez le panier ou la boîte à smartphones pour la durée du diner, en famille), déconnectez pendant un moment. Pour vous rappelez que vous contrôlez votre vie (et n’êtes pas l’esclave de vos gadgets) mais aussi prendre le temps de vivre dans l’instant.

Digital Detox


Pour aller plus loin et suivre la (nouvelle ?) mode de la Silicon Valley, vous pouvez opter pour les solutions un tantinet plus extrèmes. Entre la “digital detox”, en forme de retour à la terre – ou aux sources. Des camps de vacances améliorés, pour adultes, où toute forme de technologie reste à la porte. Une démarche à mi-chemin entre retraite zen et camp de dégrisement pour drogués digitaux.

Avant de vous lancer dans une semaine préhistorique, vous pouvez essayer, tout simplement, d’effacer vos applications de réseaux sociaux pendant une journée, ne recevant ainsi pas de notifications et laissant de côté l’envie de cliquer – sur l’app. Il ne s’agit pas d’effacer vos comptes, juste les applications et tenter de “survivre” sans clics, likes ou photos de chats.

Au final, il n’y a pas de conseil miracles. Tout comme il n’y a pas de standard. Cependant, si la peur de la batterie vide tourne, pour vous, à la phobie; s’il vous est impossible de passer une heure sans naviguer négligemment sur Facebook. Ou si vos cercles sociaux n’existent, quasiment, qu’en ligne, il est temps de faire une pause et considérer vos options pour réduire le degré de contrôle qu’ont les réseaux sociaux sur vous.

How to animate any divi module

Did you ever wanted to animate any DIVI module when scrolling down?

Like this text module for example?

Blablalbal

Or this testimonial?

Test

Or the contact form module? Or any other?

11 + 6 =

So this simple tutorial will help for sure.

In fact, everything is still in DIVI code. You just have to add a class to your module depending what animation you want to use.

Step One: Create a module

The first thing you have to do here is to create a module (it doesn’t matter which one you choose, just create it).
For this example I’ll use a text module.

How to animate any divi module

Step Two: Add the class

There are two css classes you have to add for this effect to work.

The first one is: « et-waypoint »

The second one is the class of the effect you’re looking for

How to animate any divi module

Step Three: Choose your effect

Now, several possibilities are up to you

You can choose between five effects made by Divi:

FROM TOP

et-waypoint top-animated

FROM RIGHT

et-waypoint right-animated

FROM LEFT

et-waypoint left-animated

FROM BOTTOM

et-waypoint bottom-animated

FADE IN

et-waypoint fadein-animated

Step Four: Copy this code

/*--------FROM LEFT----------*/

.left-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeLeft 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-moz-animation: fadeLeft 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-o-animation: fadeLeft 1.3s 1 cubic-bezier(0.77,0,.175,1.3); 
	animation: fadeLeft 1.3s 1 cubic-bezier(0.77,0,.175,1.3);}

/*--------FROM RIGHT---------*/

.right-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeRight 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-moz-animation: fadeRight 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-o-animation: fadeRight 1.3s 1 cubic-bezier(0.77,0,.175,1.3); 
	animation: fadeRight 1.3s 1 cubic-bezier(0.77,0,.175,1.3);}

/*---------FROM TOP----------*/

.top-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-moz-animation: fadeTop 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-o-animation: fadeTop 1.3s 1 cubic-bezier(0.77,0,.175,2); 
	animation: fadeTop 1.3s 1 cubic-bezier(0.77,0,.175,2);}

/*--------FROM BOTTOM--------*/

.bottom-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77,0,.175,2);
	-moz-animation: fadeBottom 1.5s 1 cubic-bezier(0.77,0,.175,2);
	-o-animation: fadeBottom 1.3s 1 cubic-bezier(0.77,0,.175,2); 
	animation: fadeBottom 1.3s 1 cubic-bezier(0.77,0,.175,2);}

/*---------FADE IN-----------*/

.fadein-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-moz-animation: fadeIn 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-o-animation: fadeIn 1.3s 1 cubic-bezier(0.77,0,.175,2); 
	animation: fadeIn 1.3s 1 cubic-bezier(0.77,0,.175,2);}

To be sure that all of those effects will work, you have to copy and paste this css part into the Divi Theme Options panel.

How to animate any divi module

Step Five: Try it!

Now you can try it on every module

A text module from left

A testimonial

from right

CSS tricks for great simple effects for DIVI

Hi DIVI people, this is just another tutorial, this one will show you how to create a bordered effect box to your modules and / or letters, that can be beautifull for example, I used it for my own homepage.

François Pinturault

Communication, Webulle

Step One: How to create a large title section with style

A) THE MODULE

Create a standard section and select the large module (first position) then choose to add text in this one

CSS tricks for great simple effects for DIVI

B) THE CONTENT Add your title in the text module and choose center for the text orientation (the effect will be better if you do so)

CSS tricks for great simple effects for DIVI

C) THE SETTINGS On the row module general settings (green block), click on the force fullwidth button then go to the section module settings (blue block) and add a background color (Here I chose a light grey #E8E8E8)

CSS tricks for great simple effects for DIVI

D) THE CSS Go into the section module general settings then click on « Custom CSS » and paste this code in the « main element » section:

outline: 5px solid #E8E8E8;
outline-offset: 3px;

Here is an explanation about those css properties: outline: 5px solid #E8E8E8; (This is where you choose the size, the line properties and the line color) outline-offset: 3px; (This is where you choose the size of the space between the text module and the outline)

Step Two: How to create a post card look-alike section

A) THE MODULE

Create a standard section and select the 1/2 /12 module (second position) then choose to add text in the left module and an image in the right module

CSS tricks for great simple effects for DIVI

B) THE CONTENT Add your text in the left module and choose center for the text orientation (the effect will be better if you do so) then add your image in the right module.

CSS tricks for great simple effects for DIVI

C) THE SETTINGS On the row module general settings (green block), click on the use custom gutter width button and choose 1 as the gutter width, on the advanced design settings click on the equalize column heights button then go to the image module settings and click on the force fullwidth button and add a background-color for your text module.

CSS tricks for great simple effects for DIVI

D) THE CSS Go to Appearance > Editor then and paste this code:

.post-card .et_pb_column_19 {
outline: 5px solid #FFFFFF;
outline-offset: -15px;

Paste the name of your class (« .post-card » here) in the row module settings to be sure that your effect will be applied. The number after « .et_pb_column_ » depends on the column you want that effect The outline color depends also on your text module background-color

Hello There!
This is how you make a postcard effect!

CSS tricks for great simple effects for DIVI

Ste^p Three: How to create a nice paragraph effect

A) THE MODULE

Create a standard section and select the large module (first position) then choose to add text in it.

CSS tricks for great simple effects for DIVI

B) THE CONTENT Add your text in module and choose left for the text orientation (the effect will be better if you do so)

CSS tricks for great simple effects for DIVI

C) THE CSS Go to Appearance > Editor then and paste this code:

.calligraphy2 {
background-color: #E8E8E8; color: #000000;
height: 55px; width: 55px;
line-height:55px; font-size: 35px;
float: left; display: inline-block;
font-family: ‘Georgia’; font-style: italic; text-align:center;
margin: 4px 17px 0 0;
outline: 2px solid #E8E8E8;
outline-offset: 3px; }

To make sure this effect will be applied, create a <span class= »calligraphy2″>your letter</span> in the text module then write (or paste) the rest of your text. You can see the result below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium eleifend mauris, aliquam ultricies nisl porttitor nec. Donec volutpat dui id ipsum eleifend, a malesuada nulla tempus. Suspendisse dignissim congue lobortis. Vestibulum laoreet dui eget massa egestas feugiat. Ut eleifend sapien arcu, non feugiat justo consequat eu. Nunc efficitur nulla mi, a sollicitudin tellus pulvinar quis. Vestibulum nisi mauris, sollicitudin quis pharetra vitae, gravida et erat. Vestibulum vitae vehicula sem, et ullamcorper elit

Step Four: Customization

Now that you have all those effects available, you can customize them!
For that, tou just have to change the outline properties as you wish.

W

W

W

outline: 3px inset #10a099;

outline: 3px double #333333;

outline: 3px groove #ff1919;

.no-outset {
background-color: #E8E8E8; color: #000000;
height: 55px; width: 55px;
line-height:55px; font-size: 35px;
float: left; display: inline-block;
font-family: ‘Georgia’; font-style: italic; text-align:center;
margin: 4px 17px 0 0;
outline: 2px solid #E8E8E8;
outline-offset: 3px; }

W

Pour faire cet effet blueblueblue

Appeler
Y aller