PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

Mise à jour

Mise à jour de la base de données, veuillez patienter...

[CSS] Encore quelques effets avancés...

mardi 1 mars 2016 à 17:03

Après mon premier article sur les astuces en CSS, puis le second, une autre astuce pour des menus responsives (incluse sur cette page), un autre post sur les choses à éviter ainsi que sur les préfixes devenues inutiles, quelques idées comme les couleurs relatives et quelques autres, voici le temps d’un autre article sur le sujet.

Cacher un élément avec une animation

Le but ici est d’avoir un élément HTML (un popup par exemple) et de le cacher après quelques instants en l’animant. Le principal problème étant que les propriétés « display: none » et « visibility: hidden » sont impossibles à animer, et il faut donc contourner tout ça. Mon astuce est inspirée de cette page.

On va se servir de l’opacité de l’élément. Le problème, c’est que si on n’utilise que ça, l’élément sera toujours là mais juste invisible : il occupera toujours de la place et masquera ce qui se trouve dessous (si c’est un formulaire ou un lien qui se trouve en dessous, ils seront inaccessible). On va donc réduire la hauteur de l’élément à zéro et masquer tout ce qui dépasse : l’élément ne mesurera plus rien.

L’élément à cacher est ici le « #popup ». Il se cachera après 3 secondes et l’animation durera 1 seconde.

Code CSS :

#popup {
    animation: disapear 1s 3s;
    animation-fill-mode: forwards;
    height: 100px;
    opacity: 1;
    overflow: hidden;
}

@keyframes disapear {  
    100% {
        height: 0;
        opacity: 0;
    }
}

Le fonctionnement des animations est simple : on dit qu’un élément HTML doit être animée avec une animation bien précise, et plus loin dans le code on va déclarer ladite animation : c’est le rôle du « @keyframes disapear », où on décrit l’avancement de l’animation. Ici, seul l’avancement à 100% est déclarée : l’état à 0% correspond au CSS déclaré « normalement », mais il est possible de déclarer des états intermédiaires pour chaque pourcentage.

La ligne « animation-fill-mode: forwards; » est très importante : sans elle, l’animation une fois terminée replacera l’élément dans son état initial. Ne pas mettre cette ligne permet de faire des animations dont les effets ne durent pas.

Les démos de codes sont ici :

Mettre une ligne de texte sur une seule ligne et masquer ce qui dépasse

Ici, on veut qu’une ligne de texte ne retourne pas à la ligne. On souhaite également masquer ce qui dépasse. Bien-sûr, on connaît la méthode classique avec seulement deux propriétés :

#element {
    white-space: nowrap;
    overflow: hidden;
}

Sauf que la coupure n’est pas belle. L’astuce ici est d’ajouter la propriété CSS3 « text-overflow », qui permet de choisir ce qui se passe à la coupure. Je choisis toujours « ellipsis », qui va ajouter des points de suspensions avant de couper la ligne.

Notez qu’il faut appliquer le « overflow: hidden » à un élément qui possède une taille définie (ici, je l’applique au bloc parent, dans lequel on met un bloc enfant).

On obtient alors :

#parent-block {
    overflow: hidden;
    text-overflow: ellipsis;
}

#block {
    white-space: nowrap;
}

Par ailleurs, pour que ça marche également sur les éléments <pre> et <code> et dans Firefox, ajoutez ceci : pre, code { white-space: pre-wrap; }.
Aussi, faites attention car cet effet masque du texte. Si c’est un résumé suivi d’un lien « lire la suite » ce n’est pas grave. Mais si c’est une ligne de code à copier, ça devient embêtant.

Ceci peut devenir très intéressant avec les flexbox, où les éléments ont une taille variable, et si l'on veut par exemple que les éléments (de liste par exemple) restent sur une seule ligne.

(source & liens)

20 ans de Pokémon \o/

dimanche 28 février 2016 à 12:40

Pokémon 20 years
Je ne pouvais pas ne rien dire, ce week-end, pour les 20 ans de pokémon, donc voilà : bon anniversaire Pokémon \o.

Il y a tout juste 20 ans que ça a commencé, au Japon, que les premiers jeux sur Game Boy sont sortis. Ils sont sortis un peu plus tard dans le reste du monde. Puis il y a eu la série, les jeux et tout le reste.

En ce qui me concerne, pokémon c’est à peu près toute mon enfance (donc ça l’est encore aujourd’hui^^).

pokémon stuff
J’ai ressorti les cartes, l’album, les jeux vidéos, le poster, les peluches, les badges. Et je ne parle pas de tous les films (surtout le premier) et les épisodes (certains sont d’ailleurs disponibles sur mobile sur pokémon-TV)^^.

[TUTO] Root de la tablette Acer Iconia 10, A3-A30

samedi 20 février 2016 à 20:01

La tablette Acer Iconia 10 (modèle A3-A30) est une tablette sous Android Lolipop 5.0.2 de 10 pouces full-HD et avec un processeur Intel. Cette tablette peut-être rootée et c’est l’objet de ce tutoriel (qui est une version détaillée et en français ce cette procédure sur XDA). Pour mon avis sur la tablette, voir à la fin de cet article.

Comme d’habitude, je commence par dire ce que vous lirez sur tous les forums et blogs qui expliquent ce genre de chose :

La méthode qui suit a fonctionné pour moi.
La tablette est sous Android 5.0.2. Le numéro de built est Acer_AV0L0_A3-A30_1.132.00_WW_CUS1.
Cette manip nécessite un ordinateur sous Windows (ou OS-X, mais les fichiers que je fournis ne marcheront pas). J’ai utilisé un ordinateur sous Windows 7, mais ça devrait marcher sous n’importe quelle version de Windows (les machines virtuelles ne fonctionneront pas forcément).

Vous aurez besoin de divers fichiers à télécharger ou installer, sur votre ordinateur (Windows) ou sur Android. Leur liens sont donnés en bas de cet article.

Prérequis

Sur Android :

— Il faut activer les options développeurs. Pour ça, allez dans les Paramètres > À propos de la tablette, scrollez tout en bas et trouvez Numéro de built. Cliquez 7 fois de suite dessus et ça va activer les options de dév, qui seront alors visible dans les paramètres, en bas.
— Dans les options pour les dév : activez « débogage USB », désactivez « Vérifier les applis via USB ».
— Dans les options de sécurité, activez les « Sources inconnues ». Ceci permet d’installer des paquets non validés par Google.

Sur une carte µSD, copiez le fichier SuperSu.zip, directement à la racine. Il est d’ailleurs mieux qu’il n’y ait que ce fichier dessus : ça sera plus simple (autrement ce n’est pas grave).
Mettez la carte SD dans la tablette et assurez-vous qu’Android la reconnaisse.

Sous Windows :
— Installez le programme AcerDrivers. Ça vous permet de faire reconnaître votre tablette à votre ordinateur.
— Installez le programme ADB-Setup.
— Copiez dans un dossier le programme IntelAndroid-FBRL. C’est lui qui va permettre le root, grâce à ADB.

Le Root

— Connectez la tablette à l’ordinateur. Sur le téléphone un popup surgit : autorisez l’ordi à accéder au débogage USB et n’oubliez pas de cocher la case pour mémoriser l’autorisation.
— Sur l’ordinateur, allez dans le dossier IntelAndroid-FBRL et lancez le fichier launcher.bat.

fastboot windows 7 for android 5
— ce dernier demande de taper ACCEPT (en majuscules). Faites-le puis validez par la touche Entrée.
- ensuite il faut choisir une méthode pour le Root. Pour cette tablette, il faut prendre la 5e, nommée « cwm.zip ». Pour faire ça, tapez simplement « 5 » puis validez par la touche Entrée.

Ensuite :
— S’il affiche du texte en rouge avec, ça n’est pas bon. Si il affiche « UNKNOWN », alors la connexion entre le PC et la tablette ne se fait pas. Vérifiez le câble, vérifiez les branchements, vérifiez que le PC a le droit d’accéder au débogage et revalidez par la touche Entrée.
— Si tout est bon, le texte est en vert et il affiche ceci :

DEVICE STATUS: ADB-ONLINE
DEVICE STATUS: FASTBOOT-ONLINE 


—Il vous demande de faire un choix : pour cette tablette, choisissez la méthode T4 : tapez simplement « T4 » et validez par la touche Entrée.

— la tablette va redémarrer et une partie de la procédure va se faire toute seul, à la fois sur l’ordi et sur la tablette.
— à un moment, sur la tablette vous serez dans le programme « Vampirefo Venue ». Il faut utiliser les touches de volume pour monter ou descendre et la touche On/Off de la tablette pour valider.
— naviguez jusqu’à « Install zip » puis validez.
— naviguez ensuite jusqu’à « Choose zip from external sdcard ».
— naviguez ensuite jusqu’à votre fichier SuperSu.zip. Puis validez. Ensuite, vous devez confirmer ce choix : naviguez jusqu’à la ligne « Yes ‑ Install SuperZu.zip », puis validez.
— l’installation du zip se fait toute seule.
— une fois que c’est fini, naviguez jusqu’à « +++++ Go Back +++++ » plusieurs fois de suite jusqu’à vous retrouver au menu principal. Naviguez sur « reboot system now » et validez.
— là il dit que l’accès root n’est pas possible. Ignorez, naviguez sur un des « No » et validez.

La tablette redémarre.

Une fois que le système est chargé, vous avez terminé : votre tablette est rootée.
Il ne vous reste qu’à installer le logiciel SuperSu depuis le PlayStore (ou depuis ailleurs) et c’est bon.

Sur le PC, vous pouvez supprimer tous les fichiers téléchargés ou installés.
Sur la carte SD dans la tablette, vous pouvez supprimer SuperSu.zip.
Sur la tablette, vous pouvez aussi désactiver le déboguage USB.

Les fichiers à télécharger

Quelques liens



Autrement, cette tablette : je recherchais une tablette depuis peu, pour éventuellement remplacer mon petit Dell XPS pour le nomade.
Mes besoins en terme de config étaient listées ici, et c’est sur conseil du Croc-Mignon sur Twitter que je l’ai prise (elle avait tout ce que je voulais).

La tablette n’est pas mal du tout pour son prix de 300 € : pas trop lourde, l’écran est très bon (full-HD, forcément…), Wifi/BT/GPS (et Glonass!)/NFC…), et le CPU Intel semble faire des merveilles. J’avais déjà pu comparer du Qualcomm, généralement plus puissants que du MediaTEK, mais Intel s’en tire très bien aussi : la navigation entre les app et les sites web est fluide et je n’ai aucun "lag" à noter. Je n’ai pas testé de gros jeux dessus (je n’en ferais probablement jamais).
Il possède 32 Go de mémoire (disque SSD) mais dispose d’un emplacement pour Micro-SDXC, supportant donc les cartes de 64 Go et même au delà normalement. Bonne surprise également : il n’y a pas trop de bloatwares (logiciels pré-installés) : à part 2 applications de Acer, un navigateur de fichier tieres, et les applications de Google (Gmail, Youtube, Maps…), on ne trouve rien. On a vu bien pire ailleurs.

Niveau connectique, il n’a pas de sortie HDMI et la sortie USB (pour la charge) ne fait pas MHL (c’était pas prévu, mais ça aurait été un petit plus).

Je n’ai pas encore eu à l’utiliser en nomade, donc je n’ai pas pu trop tester son autonomie.

En revanche j’ai pu tester l’appareil photo et il est merdique : 5 MPx c’est déjà pas génial, mais la netteté des photos est mauvaise : même pas capable de décoder un QRCode. Clairement, ne l’achetez pas pour son appareil photo.
Heureusement je ne comptais pas m’en servir pour ça (prendre des photos avec sa tablette faut être un peu dérangé) mais le fait qu’il peine même pour les QRCode c’est quand même lamentable (mais ça vient peut-être d’Android 5 aussi).

Mais pour le reste, comme j’ai dit, l’appareil dans son ensemble a l’air plus que correct pour ce prix là.

Un truc à savoir : par défaut, comme tout appareil sous Android 5.x normalement, les partitions de données sont chiffrées. En soit c’est bien, mais pour le root ça m’a empêché d’accéder aux données avec les outils de root (ce qui était problématique pour trouver le fichier Zip du root), c’est pour ça que j’ai dû passer par une carte µSD.
Certains sites disent qu’il faut faire une réinitialisation de sortie d’usine pour virer le chiffrement : ça n’a pas marché chez moi. Comme je ne m’en fiche un peu je n’ai pas cherché plus loin mais pour le désactiver quand même il faut flasher la Rom et/ou le Bios ce que je n’ai pas cherché à faire.

Mon avis sur les articles sponsorisés (et gagner de l’argent sur internet)

mardi 16 février 2016 à 18:57

Ici, une très bonne question de Gilles : il se demande s’il doit ou pas accepter les articles sponsorisés (payés, quoi) sur son site.
C’est une question où il y a pas mal à discuter.

Je reprends ici mon commentaire laissé sur son article en l’étoffant.

Déjà, pour commencer, je ne vois absolument aucun problème à gagner de l’argent. Même avec son blog ou site.
Ce n’est pas mal : tout le monde a besoin de payer son pain à un moment et vu le temps passé à bloguer, à raison d’une ou deux heures par article (en ce qui me concerne, et pour les articles rapides), merde, ça serait le comble si on n’en avait pas le droit.

Je sais qu’en France il est maaaal de gagner de l’argent, et encore plus maaaaaaal de gagner de l’argent avec une activité qu’on aime.
Mais je m’en tape, franchement. Si y en a qui ont un problème avec ça, c’est justement leur problème et pas le miens.

Les seules conditions que je vois aux articles sponsorisés, sont :

… et je pense que c’est tout.
Si je lis un blog pour son blogueur, alors je lui fait confiance pour choisir les sujets qui l’intéressent et pour garder une certaine intégrité dans la rédaction des articles. Je ne peux pas exiger d’un blogueur de ne pas faire d’articles sponsorisés, tout comme lui ne peut pas me forcer à lire l’intégralité de ce qu’il écrit. Je lis surtout des articles et pas spécialement des blogueurs. Les idées, pas les personnes.

Enfin, chacun est libre de faire ce qu’il veut sur son site. Il n’a rien à redevoir à qui que ce soit (sinon de la Loi).
La seule chose importante est de prendre ses responsabilités : si on est trop avare avec la pub par exemple, les gens vont fuir ou mettre des bloqueurs de pub. Ça n’est pas leur faute mais de la vôtre. Savoir où s’arrêter est crucial, beaucoup de sites n’ont pas su le faire et en payent aujourd’hui les conséquences avec les bloqueurs de nuisances publicitaire (et veulent nous en faire porter le chapeau, en plus).

Sur ce blog

Ce qui suit concerne mon cas, sur mes blogs. Ce n’est plus la réponse à l’article de Gilles.

Pour commencer, mes blogs ne me rapportent (plus) rien. Je n’ai plus de compte Flattr (qui me rapportait ~10 € par mois) et je n’utilise plus de publicité depuis très longtemps. Je n’exclue pas ces possibilités, mais pour le moment je n’en ai pas l’utilité : j’ai déjà un emploi payé. Je serais heureux de pouvoir vivre de mon blog, y compris couleur-science.eu, je ne dis pas le contraire, mais je n’en suis pas encore là (il ne tient qu’à mois de travailler sur ça, et c’est en cours).

Ensuite, je n’ai encore jamais accepté d’articles payés non plus*. Déjà parce que ce dont j’aurais été supposé parler ne m’intéressait pas plus que ça et aussi parce que si je ne veux pas vous prendre pour des cons, je ne veux pas non plus que les annonceurs ne me prennent pour un con avec des contreparties risibles. Nous sommes des blogueurs, pas de la publicité à bas coût, merci d’en tenir compte quand vous nous contactez (et accessoirement, c’est vous qui me contactez : moi je n’ai rien demandé, alors sachez être un minimum convainquant et attractif… ce qui n’est pas simple quand ma page de contact indique de ne pas me contacter pour de la pub, mais bon, forcez-vous quand même, vous aurez l’air moins ridicule).

En revanche, des lecteurs m’ont parfois offert des choses (en plus des innombrables lectures, partages, commentaires ou emails de remerciement (ou pas) ou d’encouragement que vous m’envoyez) :

J’accepte ce genre de choses sans aucun problème, sur la forme, et avec un immense plaisir.

En revanche, les dons en espèce j’ai du mal à les accepter : un don en France est taxé à hauteur de 60%. Je doute qu’en donnant 10 € à un blogueur vous souhaitez financer la prochaine campagne de François Hollande ou les branquignolles de l’hémicycle à hauteur de 6 € (les 4 € restants sont ensuite imposés, j’imagine). Donc si vous souhaitez investir de l’argent, je conseille généralement de le faire dans une association (Framasoft, LQDN, Mozilla, EFF…).

ÉDIT : j’avais fait un article contre lequel on m’avait offert un compte prémium et une série de codes promo pour vous : ici. Le site n’existe plus aujourd’hui (et c’est bien dommage, le site était intéressant). Notons que je considère qu’il respecte les 3 conditions cités plus haut.

Aussi, en bas de cette page, il y a le lien vers Webou-pro, l’hébergeur du site. C’est aussi un lien affilié, qui me fait une remise quand quelqu’un commande un hébergeur Web chez eux en passant par mon site. Ce lien ne peut que couvrir le prix de l’hébergement Web et ne me rapportera donc pas d’argent en tant que tel.

La blague du flat-design chez Microsoft

mardi 16 février 2016 à 18:49

Purée, à quoi ça sert d’avoir des écrans qui affichent 16 millions de couleurs si les logiciels ne comportent jamais plus de 16 couleurs, aucun dégradé, aucune ombre, aucun arrondi ?

Et depuis quand, ceci :

new ccleaner interface
Est-il d’aspect plus moderne que ceci :

old ccleaner interface
C’est une plaisanterie à l’échelle mondiale, c’est ça ?
Voyez les icônes de fermeture, en haut à droite : justement, ils ne sont pas à droite car il reste une marge. Et les tailles sont disproportionnées o_O.

Honnêtement, avec le flat design chez Microsoft j’ai l’impression d’être revenu à ça :

windows 95 screenshot
C'est d'un moche : Windows, Edge, les sites de Microsoft (dont Outlook).

Mais je sais, les goûts et les couleurs, tout ça… C'est personnel est on aime ou on n’aime pas.
Bah moi je n’aime pas.

Feed is invalid - XML error: --^ Fatal Error 68: StartTag: invalid element name Line: 1 Column: 2 - --^ Fatal Error 5: Extra content at the end of the document Line: 1 Column: 2